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

现在不行，你可以试试这个：

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

然后在CSS中：

label {/* all labels */}
input + label {/* label after input which is the same as "input in label" */}

您使用了属性for，这在标签内使用输入时不是必需的，因此不会有其他HTML。

Answer 2

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

用于样式checkbox和:before伪

的范围

* {
  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>

Answer 3

<label>
    <input id="num" type="checkbox" value="" name="numbers" /> <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>

当输入在标签内时，用什么CSS选择器来修改复选框标签？

3 个答案: