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 whose indeterminate
property is set to true
by JavaScript
<input type="radio">
elements, when all radio buttons with the same name
value in the form are unchecked<progress>
elements in an indeterminate state:indeterminate
This example applies special styles to the labels associated with indeterminate form fields.
<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>
input:indeterminate + label { background: lime; }
var inputs = document.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++) { inputs[i].indeterminate = true; }
<progress>
progress { margin: 4px; } progress:indeterminate { opacity: 0.5; background-color: lightgray; box-shadow: 0 0 2px 1px red; }
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. |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | Yes | Yes | Yes | Yes | Yes | Yes |
type="checkbox" |
? | Yes | 3.6 | 9 | 10.6 | 3 |
type="radio" |
39 | No
|
51 | No | ? | No
|
<progress> |
6 | Yes | 6 | 10 | ? | Yes |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | ? | ? | Yes | Yes | ? | ? | ? |
type="checkbox" |
? | ? | Yes | 4 | ? | ? | ? |
type="radio" |
39 | ? | No
|
51 | ? | No
|
? |
<progress> |
? | ? | Yes | 6 | ? | ? | ? |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate