html - :checked selector not working -
i trying follow code work:
html
<div class = "col-md-4 video text-center wrapper-q1"> <p class = "no-padding"> <input class="question1" id = "vraag1" type="radio" name="q1" value="moon"> <br /> <label class = "pointer" = "vraag1">text</label> </p> </div>
css
input[type="radio"] { display:none; } label:before { content: ""; display: block; width: 33px; height:33px; margin:0 auto; background-image: url("../img/radio-btn.png"); } input[type=radio]:checked + label { content: ""; background-image: url("../img/radio-btn-checked.png"); font-size: 30px; text-align: center; line-height: 18px; }
the radio button shown, when click it, won't change "checked" image.
i appreciate help!
you missed :before
css:
input[type=radio]:checked ~ label:before { content:""; background-image: url("../img/radio-btn-checked.png"); font-size: 30px; text-align: center; line-height: 18px; }
Comments
Post a Comment