如果選中，更改複選框的圖像背景

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元素狀態僞類部分

我希望這將有助於