CSS input [type = checkbox]：複選框

Question

我一直在試圖弄清楚爲什麼這對我不起作用。我有一個CSS複選框，我想在選中時重新放置背景。有人能告訴我爲什麼這不起作用嗎？

這裏是原代碼： HTML

<input type="checkbox" /> 
<label>Flight</label> 

CSS

input[type=checkbox]{ 
display: none; 
} 


input[type=checkbox] + label{ 
display: inline-block; 
width: 32px; 
height: 32px; 
padding-left: 40px; 
background-position: 0 0; 
background-repeat: no-repeat; 
line-height: 32px; 
cursor: pointer; 
} 

input[type=checkbox]:checked + label{ 
background-position: left -32px; 
} 

label{ 
background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_d2a60beb8fb6bbb280642579049ebf65.png); 
} 

Demo

這裏是固定碼：

HTML

<input type="checkbox" id="travel_check" /> 
<label for="travel_check">Flight</label> 

Answer 1

該標籤未定義爲指向該複選框。在這種情況下，您需要在複選框上輸入id，並在標籤上輸入相應的for。

http://codepen.io/anon/pen/Eauxc