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

Question

I am making a custom look for my radio buttons. However I stumbled onto a problem when checking with CSS if the button is selected.

<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; }

That would be this line. When the radio button is checked it needs to turn the background green.

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

Am I missing something?

Answer 1

div1 + div2 targets div2 that goes right after div1 . So, in order to make your code work you have to redo your html part. Place <input> before <label> inside <li> s:

 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; } 

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