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

【问题标题】：What CSS selector to modify checkbox label when input is inside label?当输入在标签内时，用什么 CSS 选择器修改复选框标签？
【发布时间】：2014-10-22 06:52:45
【问题描述】：

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

我正在使用 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 没有办法返回父对象，不是吗？我可以使用什么选择器来完成此操作？

【问题讨论】：

你不能（在 CSS 中），因为你不能根据子元素的状态来选择一个元素。尝试更改标记，使label 元素出现在关联的input 元素之后（这也更合乎逻辑）。
不可能，暂时不可能，它将在CSS4 中实现（或已经实现）。与此同时，您将不得不使用JavaScript。
对于其他有此问题的人：Vitorino Fernandes 的回答有效，或者，您可以通过循环 {{ for selection in form.field }} 访问 Django 中各个按钮的代码（插入任何不同的 html 你想要这里）{{ endfor }}
以防万一其他人正在寻找上面评论中提到的“维托里诺费尔南德斯答案”，答案就是这个：stackoverflow.com/a/26502163/854076
虽然您可能无法直接执行此操作，但可以在复选框周围使用带有标签的自定义复选框样式，但您需要额外的元素和同级选择器。示例wtfforms.com

标签： css checkbox django-forms

【解决方案1】：

演示 - 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>

【讨论】：

你能有一个描述性的文本标签连接到这个例子的复选框吗？

【解决方案2】：

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

<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。

【讨论】：

【解决方案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>

【讨论】：

解释您已更改或修复的内容将使此答案对未来的读者更加有用！