--- title: ':indeterminate' slug: 'Web/CSS/:indeterminate' translation_of: 'Web/CSS/:indeterminate' ---

:indeterminate CSS 伪类表示状态不确定的表单元素:

/* Selects any <input> whose state is indeterminate */
input:indeterminate {
  background: lime;
}

根据上述例子（选择器）选中的元素是：

<input type="checkbox"> 元素，其 indeterminate 属性被 JavaScript设置为 true 。
<input type="radio"> 元素, 表单中拥有相同 name值的所有单选按钮都未被选中时。
处于不确定状态的 {{HTMLElement("progress")}} 元素

语法

示例

Checkbox & radio button

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;
}

Progress bar

CSS

progress {
  margin: 4px;
}

progress:indeterminate {
  opacity: 0.5;
  background-color: lightgray;
  box-shadow: 0 0 2px 1px red;
}

HTML

<progress>

结果

规范

Specification	Status	Comment
{{SpecName('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}}	{{Spec2('HTML WHATWG')}}	No change
{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}	{{Spec2('HTML5 W3C')}}	Defines the semantic regarding HTML and constraint validation.
{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}	{{Spec2('CSS4 Selectors')}}	No change
{{SpecName('CSS3 Basic UI', '#indeterminate', ':indeterminate')}}	{{Spec2('CSS3 Basic UI')}}	Defines the pseudo-class, but not the associated semantic.

语法

示例

Checkbox & radio button

CSS

HTML

JavaScript

Progress bar

CSS

HTML

结果

规范

浏览器兼容性