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. |
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.
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 |
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 Full support 79 | 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 Full support 26 | Safari iOS
No support
No
| 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