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