当仅使用CSS取消选中所有复选框时，是否可以将特殊样式设置为复选框？

Question

将CSS应用于选中/未选中复选框（使用:checked）及其标签很简单。但是，当所有复选框都未选中时，我需要对所有复选框应用另一种样式。

这是使用JavaScript实现相对简单，但我有一个我不想修改的小部件，所以我想知道是否有一个CSS技巧。我怀疑没有，但总有一个人更聪明:)

PS好吧，html位看起来像这样，没什么特别的：

<div>
    <input type=checkbox id=chkFilterMath>
      <span><label for=chkFilterMath>Math</label></span>
    <input type=checkbox id=chkFilterHist>
      <span><label for=chkFilterHist>History</label></span>
    ...
</div>

目前的CSS使用

input:not(:checked) + span label

选择器将样式应用于未选中的复选框/标签。

可以在这里找到一个简单的例子：https://jsfiddle.net/k56hz8va/我想在取消选中所有复选框时将color: black设置为标签。

Answer 1

留下所有希望，你进入

没有。没有这样的CSS选择器允许根据以下元素的状态选择先前的DOM元素。有关详细信息，请参阅Is there a “previous sibling” CSS selector?和Is there a CSS parent selector?帖子。

Answer 2

我使用的是黑客攻击：隐藏输入本身，但保留标签。然后使用伪元素:: before插入一些图标来表示选中/未选中。

这是一个演示：https://codepen.io/anon/pen/WdrdPE

和代码：

<input id="option_1" type="checkbox"><label for="option_1">thing 1</label>
<input id="option_2" type="checkbox"><label for="option_2">thing 2</label>
<input id="option_3" type="checkbox"><label for="option_3">thing 3</label>

CSS：

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

input {
  display:none;
}
label {
  display:block;
}
input:checked + label {
  color:red; 
}

label:before {
  content:"\f1db";
  margin-right:.3em;
  font-family:Fontawesome;
}

input:checked + label:before {
  content:"\f058";
  margin-right:.3em;
  font-family:Fontawesome;
}

Answer 3

@ sashaikevich的想法很棒，但需要一些工作来解决你的问题。您可以在所有输入后放置标签。然后你的CSS和HTML将变得笨重，但你将能够根据所有输入状态控制标签的样式。 尝试运行下面的代码段。最新规则具有最高优先级，因此如果选中任何（至少一个）复选框，则标签为黑色。否则标签是红色的。

[type=checkbox] {
  display: none;
}

#check-box-1:checked~[for=check-box-1] .glyphicon-unchecked,
#check-box-2:checked~[for=check-box-2] .glyphicon-unchecked,
#check-box-3:checked~[for=check-box-3] .glyphicon-unchecked,
#check-box-1:not(:checked)~[for=check-box-1] .glyphicon-check,
#check-box-2:not(:checked)~[for=check-box-2] .glyphicon-check,
#check-box-3:not(:checked)~[for=check-box-3] .glyphicon-check
{
  display: none;
}

[for] {
  color: red;
}

[type=checkbox]:checked~[for] {
  color: inherit;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="check-box-set">
  <input id="check-box-1" type="checkbox" />
  <input id="check-box-2" type="checkbox" checked="checked" />
  <input id="check-box-3" type="checkbox" />
  <label for="check-box-1">
    <span class="glyphicon glyphicon-unchecked" aira-hidden="true"></span>
    <span class="glyphicon glyphicon-check" aira-hidden="true"></span>
    1
  </label>
  <label for="check-box-2">
    <span class="glyphicon glyphicon-unchecked" aira-hidden="true"></span>
    <span class="glyphicon glyphicon-check" aira-hidden="true"></span>
    2
  </label>
  <label for="check-box-3">
    <span class="glyphicon glyphicon-unchecked" aira-hidden="true"></span>
    <span class="glyphicon glyphicon-check" aira-hidden="true"></span>
    3
  </label>
</div>

在示例中，我使用Bootstrap Glyphicons。但是可以使用另一个字形，图像或CSS形状。