:indeterminate

The :indeterminate CSS pseudo-class represents:

• any <input type="checkbox"> element whose indeterminate DOM property is set to true by JavaScript
• <input type="radio"> elements whose radio button group's radio buttons are all unchecked
• <progress> elements in an indeterminate state

Syntax

:indeterminate { style properties }

Examples

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 element

CSS

:indeterminate {
  opacity: 0.5;
}

HTML

<progress>

Result

Specifications

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

Browser compatibility

[1] Implemented in bug 885359.

[2] See Edge bug 7124038

[3] See WebKit bug 156270