Изменить фон изображения для флажка, если установлен

Question

Я пытаюсь реализовать эту функциональность, но когда я нажимаю на флажок (флажок установлен), то этот флажок не меняет его фоновое изображение и остается прежним.

Как я пытаюсь сделать это:

<div class="checkbox"> 
    <input class="car_checkbox" type="checkbox" value="1"> 
    <span class="private_zip"></span> 
</div> 

и CSS:

input[type="checkbox"] { 
    opacity:0; 
    height: 18px; 
    width: 18px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 2; 
} 

input[type="checkbox"] + span.private_zip { 
    width: 18px; 
    height: 18px; 
    display: inline-block; 
    background: url("checkbox.png") no-repeat; 
} 

input[type="checkbox"]:checked + span.private_zip { 
    width: 18px; 
    height: 18px; 
    display: inline-block; 
    background: url("checkbox_check.png") no-repeat; 
} 

Почему изображение не включается, как только будет нажата флажок?

Спасибо

Answer 1

Последний бит вашего CSS должен быть:

input[type="checkbox"]:checked { 
    width: 18px; 
    height: 18px; 
    display: inline-block; 
    background: url("checkbox_check.png") no-repeat; 
} 

Удалите + span.private_zip часть.

Answer 2

Читать эту

https://www.w3.org/community/webed/wiki/Advanced_CSS_selectors

элемент UI состояние псевдо-классы раздел

Я надеюсь, что это поможет