The :indeterminate
CSS pseudo-class represents any form element whose state is indeterminate, such as checkboxes which have their HTML indeterminate
attribute set to true
, radio buttons which are members of a group in which all radio buttons are unchecked, and indeterminate <progress>
elements.
/* Selects any <input> whose state is indeterminate */
input:indeterminate {
background: lime;
}
Elements targeted by this selector are:
<input type="checkbox">
elements whoseindeterminate
property is set totrue
by JavaScript<input type="radio">
elements, when all radio buttons with the samename
value in the form are unchecked<progress>
elements in an indeterminate state
Syntax
:indeterminate
Examples
Checkbox & radio button
This example applies special styles to the labels associated with indeterminate form fields.
HTML
<div>
<input type="checkbox" id="checkbox">
<label for="checkbox">This label starts out lime.</label>
</div>
<div>
<input type="radio" id="radio">
<label for="radio">This label starts out lime.</label>
</div>
CSS
input:indeterminate + label {
background: lime;
}
JavaScript
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].indeterminate = true;
}
Progress bar
HTML
<progress>
CSS
progress {
margin: 4px;
}
progress:indeterminate {
opacity: 0.5;
background-color: lightgray;
box-shadow: 0 0 2px 1px red;
}
Result
Specifications
Specification | Status | Comment |
---|---|---|
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 semantics of HTML and constraint validation. |
Selectors Level 4 The definition of ':indeterminate' in that specification. |
Working Draft | No change. |
BCD tables only load in the browser
- Web forms — Working with user data
- Styling web forms
- The
<input type="checkbox">
element'sindeterminate
attribute <input>
and theHTMLInputElement
interface which implements it.- The
:checked
CSS selector lets you style checkboxes based on whether they're checked or not