：不确定 | :indeterminate

: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>

结果

规范

Specification	Status	Comment
HTML Living StandardThe definition of ':indeterminate' in that specification.	Living Standard	No change
HTML5The definition of ':indeterminate' in that specification.	Recommendation	Defines the semantic regarding HTML and constraint validation.
Selectors Level 4The definition of ':indeterminate' in that specification.	Working Draft	No change
CSS Basic User Interface Module Level 3The definition of ':indeterminate' in that specification.	Candidate Recommendation	Defines the pseudo-class, but not the associated semantic.

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Edge	Opera	Safari
type="checkbox"	(Yes)	3.6 (1.9.2)	9.0	(Yes)	10.60 (2.6)	3.0
<progress>	6.0	6.0 (6.0)	10	(Yes)	?	5.2
type="radio"	39.0	51 (51)1	No support	No support2	?	No support3

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Edge	Opera Mobile	Safari Mobile
type="checkbox"	?	1.0 (1.9.2)	?	(Yes)	?	?
<progress>	?	6.0 (6.0)	?	(Yes)	?	?
type="radio"	39.0	51.0 (51.0)1	No support	No support2	?	No support3

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18