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 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. |
Desktop | ||||||
---|---|---|---|---|---|---|
:indeterminate |
1 | 12 | 2 | 10 | 9 | 3 |
Applies to <input type="checkbox"> elements |
1 | 12 | 3.6 | 10 | 10.6 | 3 |
Applies to <progress> elements |
6 | 12 | 6 | 10 | 15 | 5.1 |
Applies to <input type="radio"> elements |
39 | 79 | 51 | No | 26 | No
|
Mobile | ||||||
---|---|---|---|---|---|---|
:indeterminate |
≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
Applies to <input type="checkbox"> elements |
≤37 | 18 | 4 | 11 | 1 | 1.0 |
Applies to <progress> elements |
37 | 18 | 6 | 14 | 5 | 1.0 |
Applies to <input type="radio"> elements |
39 | 39 | 51 | 26 | No
|
4.0 |
<input type="checkbox">
element's indeterminate
attribute<input>
and the HTMLInputElement
interface which implements it.:checked
CSS selector lets you style checkboxes based on whether they're checked or not
© 2005–2020 Mozilla 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