Question

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

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

Answer 1

为了使用“已选中”复选框设置标签样式首先，您必须为输入“复选框”id="qid"设置ID，并将此代码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>

Answer 2

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

基于子div的样式标签

2 个答案: