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. |
Candidate Recommendation | Defines the pseudo-class, but not the associated semantics. |
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:
CITguy,
mfluehr,
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:
CITguy,