You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!
The :indeterminate
CSS pseudo-class represents any form element whose state is indeterminate.
/* 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. |
CSS Basic User Interface Module Level 3 The definition of ':indeterminate' in that specification. |
Recommendation | Defines the pseudo-class, but not the associated semantics. |
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 Yes | Safari Full support 3 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
type="checkbox" | 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 |
<progress> | 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 |
type="radio" | Chrome Full support 39 | Edge
No support
No
| Firefox Full support 51 | IE No support No | Opera Full support 26 | Safari
No support
No
| WebView Android Full support 39 | Chrome Android Full support 39 | Firefox Android Full support 51 | Opera Android ? | Safari iOS
No support
No
| Samsung Internet Android Full support 4.0 |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- See implementation notes.
- See implementation notes.