CSS - :indeterminate
The :indeterminate
CSS pseudo-class represents:
Examples
Checkbox & radio button
CSS
CSS
Copy Code
input, span { background: red; } :indeterminate, :indeterminate + label { background: lime; }
HTML
HTML
Copy Code
<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
JavaScript
Copy Code
var inputs = document.getElementsByTagName("input"); for(var i = 0; i < inputs.length; i++) { inputs[i].indeterminate = true; }
Progress element
CSS
CSS
Copy Code
:indeterminate { opacity: 0.5; }
HTML
HTML
Copy Code
<progress>
Result
Syntax
CSS
Copy Code
:indeterminate { <var>style properties</var> }
Description
The :indeterminate
CSS pseudo-class represents:
- 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
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) | ? | ? | ? | ? |
<progress> |
? | 6.0 (6.0) | ? | ? | ? | ? |
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
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. |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/:indeterminate