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 StandardThe definition of ':indeterminate' in that specification. | Living Standard | No change. |
HTML5The definition of ':indeterminate' in that specification. | Recommendation | Defines the semantics of HTML and constraint validation. |
Selectors Level 4The definition of ':indeterminate' in that specification. | Working Draft | No change. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:indeterminate
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox
Full support 2 |
IE
Full support 10 |
Opera
Full support 9 |
Safari
Full support 3 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 10.1 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
Applies to <input type="checkbox"> elements
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox
Full support 3.6 |
IE
Full support 10 |
Opera
Full support 10.6 |
Safari
Full support 3 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 11 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
Applies to <progress> elements
|
Chrome
Full support 6 |
Edge
Full support 12 |
Firefox
Full support 6 |
IE
Full support 10 |
Opera
Full support 15 |
Safari
Full support 5.1 |
WebView Android
Full support 37 |
Chrome Android
Full support 18 |
Firefox Android
Full support 6 |
Opera Android
Full support 14 |
Safari iOS
Full support 5 |
Samsung Internet Android
Full support 1.0 |
Applies to <input type="radio"> elements
|
Chrome
Full support 39 |
Edge
Full support 79 |
Firefox
Full support 51 |
IE
No support No |
Opera
Full support 26 |
Safari No support No No support No Notes' See WebKit bug 156270. |
WebView Android
Full support 39 |
Chrome Android
Full support 39 |
Firefox Android
Full support 51 |
Opera Android
Full support 26 |
Safari iOS No support No No support No Notes' See WebKit bug 156270. |
Samsung Internet Android
Full support 4.0 |
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.'
- See implementation notes.
See also
- 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
:indeterminate by Mozilla Contributors is licensed under CC-BY-SA 2.5.