Question

我正在为我的单选按钮进行自定义查找。但是，如果选中该按钮，我在使用CSS检查时偶然发现了一个问题。

<ul class="list">
    <li><label for="radio_sex_male"> <i class="icon fa fa-mars" aria-hidden="true"></i> <span class="text">Male</span> </label> <input type="radio" id="radio_sex_male" name="sex" value="M"></li>
    <li><label for="radio_sex_female"> <i class="icon fa fa-venus" aria-hidden="true"></i> <span class="text">Female</span> </label> <input type="radio" id="radio_sex_female" name="sex" value="F"></li>
    <li><label for="radio_sex_other"> <i class="icon fa fa-genderless" aria-hidden="true"></i> <span class="text">Other</span> </label> <input type="radio" id="radio_sex_other" name="sex" value="O"></li>
</ul>

html body #body_cont form#new_user ul.list li input[type=radio] { display: none; visibility: collapse; }

html body #body_cont form#new_user ul.list li label {   
    position: relative; float: left; clear: none; display: inline-block;
    width: auto; height: 50px; margin: 0; padding: 0 20px;

    outline: 0; cursor: pointer;

    background-color: red;
}   
html body #body_cont form#new_user ul.list li label i.icon { float: left; font-size: 30px; margin: 0 8px 0 0; line-height: 50px; }
html body #body_cont form#new_user ul.list li label span.text { float: left; font-family: "Open Sans", sans-serif; font-weight: 600; font-size: 16px; line-height: 50px; }

这就是这条线。选中单选按钮时，需要将背景变为绿色。

html body #body_cont form#new_user ul.list li input[type=radio]:checked + label { background-color: green; }

我错过了什么吗？

Answer 1

div1 + div2定位div2之后的div1。因此，为了使您的代码工作，您必须重做您的HTML部分。将<input>放在<label>的{{1}}内：{/ p>

＆＃13;

<li>

＆＃13;

html body #body_cont form#new_user ul.list li input[type=radio] { display: none; visibility: collapse; }

html body #body_cont form#new_user ul.list li label {   
    position: relative; float: left; clear: none; display: inline-block;
    width: auto; height: 50px; margin: 0; padding: 0 20px;
    outline: 0; cursor: pointer;
    background-color: red;
}   
html body #body_cont form#new_user ul.list li label i.icon { float: left; font-size: 30px; margin: 0 8px 0 0; line-height: 50px; }
html body #body_cont form#new_user ul.list li label span.text { float: left; font-family: "Open Sans", sans-serif; font-weight: 600; font-size: 16px; line-height: 50px; }
html body #body_cont form#new_user ul.list li input[type=radio]:checked + label { background-color: green; }

＆＃13;

CSS选择器不工作 - 输入[type = radio]：选中

1 个答案: