:checked selector not working

Question

I am trying to get the follow code to 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" for = "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 is shown, but when I click it, it won't change to the "checked" image.

I appreciate your help!

Answer 1

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