当仅使用 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

Lasciate ogni speranza, voi ch'entrate

没有。没有这样的 CSS 选择器允许根据后续元素的状态选择先前的 DOM 元素。详情请参阅Is there a “previous sibling” CSS selector? 和Is there a CSS parent selector? 帖子。

Answer 2

我使用了一个 hack： 隐藏输入本身，但保留标签。然后使用伪元素 ::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 就会很庞大，但您将能够根据所有输入状态控制标签的样式。
尝试运行下面的 sn-p。最新规则具有最高优先级，因此如果选中任何（至少一个）复选框，则标签为黑色。否则标签是红色的。

[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。但也可以使用其他 glyp、图像或 CSS 形状。