: проверено селектор не работает

Question

Я пытаюсь получить код последующей работы:

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

Радиокнопка показано, но когда я нажму на него, он не изменится на «проверенный» образ.

Я ценю вашу помощь!

Answer 1

Вы пропустили :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; 
} 

Answer 2

Использование input[type=radio]:checked ~ label

Вместо

input[type=radio]:checked + label 

будет работать для вас.

Проверить Fiddle