css - How to style a list item when the radio input button within that li is :checked

admin管理员组

文章数量:1392003

I'm trying to add some simple css to a li item once the radio input within that tag is selected, here is the link to the page I'm referring to /, currently the border color of unchecked li item is #BDC4DD, once the radio input is checked I want it to change to #4595d0 below is the css code that I have been trying to do so far, it's creating a new border within li HTML:

    <ul class="gfield_radio" id="input_1_23">
<li class="gchoice_1_23_0">
<input name="input_23" type="radio" value="Student Accommodation" id="choice_1_23_0">
<label for="choice_1_23_0" id="label_1_23_0"><img class="thumbnail" src="/wp-content/uploads/2020/02/building.png" style="max-width:100%" alt=""><br>Student Accommodation</label>
</li>
<li class="gchoice_1_23_1">
<input name="input_23" type="radio" value="Host Family" id="choice_1_23_1">
<label for="choice_1_23_1" id="label_1_23_1">
<img class="thumbnail" src="/wp-content/uploads/2020/03/house.png" style="max-width:100%" alt="">
<br>Host Family</label>
</li>
<li class="gchoice_1_23_2">
<input name="input_23" type="radio" value="Thanks, I don't need it" id="choice_1_23_2">
<label for="choice_1_23_2" id="label_1_23_2">Thanks, I don't need it</label>
</li>
</ul>

CSS:

li .gform_wrapper ul.gfield_radio li input[type=radio]:checked+label {
        color: #4595d0;
        border: 2px solid #4595d0;
    }

本文标签： cssHow to style a list item when the radio input button within that li is checked