：不确定 | :indeterminate (Basic User Interface) - CSS 中文开发手册

:indeterminate 表示状态不确定的表单元素。

/* Selects any <input>, but only when its state is indeterminate  */
input:indeterminate {
  background: lime;
}

这包括：

<input type="checkbox"> 元素，其 indeterminate 属性被 JavaScript设置为 true 。

<input type="radio"> 元素, 表单中拥有相同 name值的所有单选按钮都未被选中时。

处于不确定状态的 <progress> 元素。

语法

:indeterminate

示例

复选框和单选按钮

CSS

input, span {
  background: red;
}

:indeterminate, :indeterminate + label {
  background: lime;
}

HTML

<div>
  <input type="checkbox" id="checkbox">
  <label for="checkbox">Background should be green</label>
</div>
<div>
  <input type="radio" id="radio">
  <label for="radio">Background should be green</label>
</div>

JavaScript

var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
  inputs[i].indeterminate = true;
}

进度元素

CSS

:indeterminate {
  opacity: 0.5;
}

HTML

<progress>

结果

规范

浏览器兼容性