基于子div的样式标签答案

【问题标题】：Styling label based on child div基于子div的样式标签
【发布时间】：2017-12-16 19:28:37
【问题描述】：

是否可以根据是否使用 CSS 检查输入来设置标签样式，或者我是否使用 javascript？

<label class="filterButton"> <input name="RunandDrive" type="checkbox" value="1"> </label>

【问题讨论】：

【解决方案1】：

您可以使用:checked 伪元素来检查复选框是否被选中。这适用于单选按钮和复选框。

问题是你想选择一个元素的父元素，但是css中实际上没有父选择器。一种解决方法是将标签元素放在输入元素之后（或之前）并使用适当的选择器。在这种情况下，我将标签元素放在输入元素之后并使用+ 选择器。

input[type=checkbox]+label {
  background-color: green;
}

input[type=checkbox]:checked+label {
  background-color: red;
}

<input type="checkbox" id="ossm" name="ossm">
<label for="ossm">Click to turn RED!</label>

但如果你真的必须将 input 元素作为 label 元素的子元素，那么是的，你必须坚持使用 JavaScript。

【讨论】：

【解决方案2】：

为了使用“选中”复选框设置标签的样式，首先您必须为输入“复选框”id="qid" 设置一个 ID，并将 for 标签此代码 for="qid" 引导此复选框输入的标签

就是这样！

input[type=checkbox] + label {
  color: #ccc;
  font-style: italic;
} 
input[type=checkbox]:checked + label {
  color: #f00;
  font-style: normal;
}

<input name="RunandDrive" type="checkbox" value="1" id="qid">
<label class="filterButton" for="qid"> Thsis will be styled</label>

【讨论】：