使用单选按钮为输入表单重置HTML的CSS

Question

我使用HTML/CSS创建选项卡内容。它使用HTML输入类型="radio"和CSS，如下面的代码片段所示:

.tabs {
display: flex;
flex-wrap: wrap; // make sure it wraps
}
.tabs label[name="tabs"] {
order: 0; // Put the labels first
display: block;
padding: 0.5rem 1rem;
margin-right: 0.3rem;
cursor: pointer;
background:#ddd;
border-radius: 0 0;
font-weight: 500;
font-family: 'Open Sans', sans-serif;
font-size:14px;
color:#222;
border-radius: 5px 5px 0 0;
transition: background ease 0.2s;
}
.tabs .tab {
order: 99; // Put the tabs last
flex-grow: 1;
width: 100%;
display: none;
padding: 0.0rem;
background: #fff;
}
.tabs input[name="tabs"] {
display: none;
}
.tabs input[name="tabs"]:checked+label {
background: teal;
color: #fff;
border-radius: 5px 5px 0 0;
}
.tabs input[name="tabs"]:hover+label {
background: #e6e6e6;
color: #222;
border-radius: 5px 5px 0 0;
}
.tabs input[name="tabs"]:checked+label+.tab {
display: block;
}
.tabcontent {
width: 470px;
padding: 0px 0px;
}
@media (max-width: 45em) {
.tabs .tab,
.tabs label {
order: initial;
}
.tabs label {
width: 100%;
margin-right: 0;
margin-top: 0.2rem;
}
}
.filtercontainer {
padding: 15px;
margin-top: 0px;
border-radius: 5px;
border-style: solid;
border-width: 2px;
border-color: teal;
position: relative;
}

<div class="content-wrapper-left">
<div class="tabs">
<input type="radio" name="tabs" id="tabone" checked="checked">
<label name="tabs" for="tabone">TAB 1</label>
<div class="tab">
<div class="tabcontent">
<div>
<p>SEARCH FORM</p>
<div class="filtercontainer">
<form action="xxx.php" method="get">
<input type="radio" id="A" name="type" value="A">
<label for="A" >All</label>
<input type="radio" id="P" name="type" value="P">
<label for="P">Past</label>
<input type="radio" id="F" name="type" value="F">
<label for="F">Future</label><br><br> Phrase
<input name="xx" type="text" size="20" maxlength="15" />
<br><br>
<input name="send" type="button" value="send" />
</form>
</div>
</div>

<div style="clear:left;"></div>
</div>
</div>
<input type="radio" name="tabs" id="tabtwo">
<label for="tabtwo" name="tabs">TAB 2</label>
<div class="tab">
<div class="tabcontent">
<p>
Content for tab 2
</p>
</div>
</div>
</div>

这一切都工作得很好，但问题是，我想在选项卡内容中使用一个常规的单选按钮的表单，如代码片段所示，但是代码显然为选项卡选择了CSS。我试过为表单/单选按钮创建特定的CSS，但不知道如何将其重置为单选按钮的原始样式。帮助感激。

注意:在这个代码片段中，我只有一个选项卡，但在我的实际页面中，我有两个选项卡。

Answer 1

更新:只是为了解释一些评论，在最初的回答中，我误解了哪些输入应该被样式为'teal等'，哪些应该保持浏览器的默认样式。

这个代码片段从问题中得到更新的代码片段，它有两个选项卡，嵌套很明显，未样式的选项卡被隐藏，直到它们的相关选项卡被单击。

需要对TAB1和TAB2进行样式化，而不需要对其他输入进行样式化。选择这些输入的方法有很多种，下面的代码片段通过注意到它们共享一个name属性并在该属性上进行选择来实现。

.tabs {
display: flex;
flex-wrap: wrap; // make sure it wraps
}
.tabs
/*label*/
input[name="tabs"] {
order: 1; // Put the labels first
display: block;
padding: 0.5rem 1rem;
margin-right: 0.3rem;
cursor: pointer;
background: #ccc;
border-radius: 0 0;
font-weight: 500;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #222;
border-radius: 5px 5px 0 0;
transition: background ease 0.2s;
}
.tabs .tab {
order: 99; // Put the tabs last
flex-grow: 1;
width: 100%;
display: none;
padding: 0.0rem;
background: #fff;
}
.tabs input[name="tabs"] {
display: none;
}
.tabs input[name="tabs"]:checked+label {
background: teal;
color: #fff;
border-radius: 5px 5px 0 0;
}
.tabs input[name="tabs"]:hover+label {
background: #e6e6e6;
color: #222;
border-radius: 5px 5px 0 0;
}
.tabs input[name="tabs"]:checked+label+.tab {
display: block;
}
.tabcontent {
width: 470px;
padding: 0px 0px;
}
@media (max-width: 45em) {
.tabs .tab,
.tabs label {
order: initial;
}
.tabs label {
width: 100%;
margin-right: 0;
margin-top: 0.2rem;
}
}
.filtercontainer {
padding: 15px;
margin-top: 0px;
border-radius: 5px;
border-style: solid;
border-width: 2px;
border-color: teal;
position: relative;
}

<div class="content-wrapper-left">
<div class="tabs">
<input type="radio" name="tabs" id="tabone" checked="checked">
<label for="tabone">TAB 1</label>
<div class="tab">
<div class="tabcontent">
<div>
<p>SEARCH FORM</p>
<div class="filtercontainer">
<form action="xxx.php" method="get">
<input type="radio" id="A" name="type" value="A">
<label for="A">All</label>
<input type="radio" id="P" name="type" value="P">
<label for="P">Past</label>
<input type="radio" id="F" name="type" value="F">
<label for="F">Future</label><br><br> Phrase
<input name="xx" type="text" size="20" maxlength="15" />
<br><br>
<input name="send" type="button" value="send" />
</form>
</div>
</div>

<div style="clear:left;"></div>
</div>
</div>
<input type="radio" name="tabs" id="tabtwo">
<label for="tabtwo">TAB 2</label>
<div class="tab">
<div class="tabcontent">
<p>
Content for tab 2
</p>
</div>
</div>
</div>
<p>
This is ouside of the tabbed content
</p>
<div class="filtercontainer">
<p>SEARCH FORM</p>
<div class="radiobutton" style="padding: 20px 0">
<form action="xxx.php" method="get">
<input type="radio" id="A" name="type" value="A">
<label for="A">All</label>
<input type="radio" id="P" name="type" value="P">
<label for="P">Past</label>
<input type="radio" id="F" name="type" value="F">
<label for="F">Future</label><br><br> Phrase
<input name="xx" type="text" size="20" maxlength="15" />
<br><br>
<input name="send" type="button" value="send" />
</form>
</div>
</div>