0

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 https://www.simplebooking.online/, 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="https://www.simplebooking.online/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="https://www.simplebooking.online/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;
    }
3
  • Welcome to WPSE! You may have more luck asking CSS-specific questions on StackOverflow and including the HTML rather than just a link. – WebElaine Mar 3 '20 at 16:44
  • Hi @WebElaine Thank you! I have updated the question with HTML code, could you please have a look at the same please? – Shahala Anjum Choudhary Mar 4 '20 at 5:20
  • li .gform_wrapper seems incorrect... Gravity Forms are not usually children of list elements unless you are embedding it in a list element yourself. Try looking at the revised code here: jsbin.com/toqasoqeqa/edit?html,css,js,output and simplify your selectors to try and isolate the problems. The JSBin example I provide works correctly, – Adam Mar 4 '20 at 6:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.