css - 当输入在标签内时，什么 CSS 选择器可以修改复选框标签？

Question

我正在尝试替换默认的浏览器复选框样式，但我的输入在我的标签内。

我正在使用 Django，CheckboxSelectMultiple 字段的表单输出如下所示:

<label for="id_field">Field Name</label>
<ul id="id_field">
<li><label for="id_field_0"><input id="id_field_0" name="field" type="checkbox" value="0" /> Field 1 Name</label></li>
<li><label for="id_field_1"><input id="id_field_1" name="field" type="checkbox" value="1" /> Field Name 2</label></li>
</ul>

我仍然可以正常设置标签样式，但是如何在 #id_field_0:checked 时更改标签样式？ CSS 没有办法回到父对象，是吗？我可以使用什么选择器来完成这个？

Answer 1

演示 - http://jsfiddle.net/victor_007/vjp9f7L2/8/

使用 span 来设置 checkbox 和 :before pseudo

* {
  margin: 0;
  padding: 0;
}
label {
  display: inline-block;
}
label > input + span {
  cursor: pointer;
}
span {
  display: block;
}
label > span.check {
  background: url('http://cdn.flaticon.com/png/32/24396.png');
  width: 32px;
  height: 32px;
}
label > input {
  position: absolute;
  visibility: hidden;
  width: 32px;
  height: 32px;
}
label > input:checked + span:before {
  content: url('http://cdn.flaticon.com/png/32/60731.png');
  display: block;
}

<label>
  <input id="" type="checkbox" value="" name="" /> <span class="check"></span>

</label>
<label>
  <input id="" type="checkbox" value="" name="" /> <span class="check"></span>

</label>
<label>
  <input id="" type="checkbox" value="" name="" /> <span class="check"></span>

</label>