CSS输入[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