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

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -