The :indeterminate
CSS pseudo-class selects any form element whose state is indeterminate.
/* Selects any <input>, but only when its state is indeterminate */ input:indeterminate { background: lime; }
This includes:
- any
<input type="checkbox">
element whoseindeterminate
DOM property is set totrue
by JavaScript. <input type="radio">
elements whose radio button group's radio buttons are all unchecked.<progress>
elements in an indeterminate state.
Syntax
:indeterminate
Examples
Checkbox & radio button
CSS
input, span { background: red; } :indeterminate, :indeterminate + label { background: lime; }
HTML
<div> <input type="checkbox" id="checkbox"> <label for="checkbox">Background should be green</label> </div> <div> <input type="radio" id="radio"> <label for="radio">Background should be green</label> </div>
JavaScript
var inputs = document.getElementsByTagName("input"); for(var i = 0; i < inputs.length; i++) { inputs[i].indeterminate = true; }
Progress element
CSS
:indeterminate { opacity: 0.5; }
HTML
<progress>
Result
Specifications
Specification | Status | Comment |
---|---|---|
WHATWG 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 semantic regarding 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. |
Candidate Recommendation | Defines the pseudo-class, but not the associated semantic. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Edge | Opera | Safari |
---|---|---|---|---|---|---|
type="checkbox" |
(Yes) | 3.6 (1.9.2) | 9.0 | (Yes) | 10.60 (2.6) | 3.0 |
<progress> |
6.0 | 6.0 (6.0) | 10 | (Yes) | ? | 5.2 |
type="radio" |
39.0 | 51 (51)[1] | No support | No support[2] | ? | No support[3] |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Edge | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
type="checkbox" |
? | 1.0 (1.9.2) | ? | (Yes) | ? | ? |
<progress> |
? | 6.0 (6.0) | ? | (Yes) | ? | ? |
type="radio" |
39.0 | 51.0 (51.0)[1] | No support | No support[2] | ? | No support[3] |
[1] Implemented in bug 885359.
[2] See Edge bug 7124038
[3] See WebKit bug 156270
Document Tags and Contributors
Tags:
Contributors to this page:
chrisdavidmills,
Wliu,
erikadoyle,
Sebastianz,
cvrebert,
fscholz,
MusikAnimal,
aschiff,
tregagnon,
teoli,
kscarfone,
rink.attendant.6,
Sheppy,
brianloveswords,
FredB,
fryn,
junger,
Jürgen Jeka,
BijuGC
Last updated by:
chrisdavidmills,