html - CSS 输入[type=checkbox]: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); 
}

演示

这是固定代码：

HTML

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

Answer 1

标签未定义为指向复选框。在这种情况下，您需要一个id复选框和一个对应for的标签。

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