:indeterminate CSS Pseudo Class
Description
The :indeterminate
pseudo-class sets the style for switches when they are in an undefined state. For example, if no switch is checked, then they are in the indicated state. In reality, the style applies only to elements for which the DOM attribute :indeterminate
via JavaScript is set to true . Also, this pseudo-class is used by some browsers for the <progress>
element.
Syntax
element:indeterminate { … }
Example
<div>
<input type="checkbox" id="checkbox">
<label for="checkbox">This label starts out green.</label>
</div>
<br>
<p>Progress bar without a value; i.e. in an indeterminate state.</p>
<progress>
<script>
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].indeterminate = true;
}
</script>
input:indeterminate + label {
background: green;
}
progress {
margin: 4px;
}
progress:indeterminate {
border: 1px solid green;
}
Browser Support
Desktop | |||||
10 | 12 | 1 | 2 | 9 | 3 |
Tablets / Mobile | |||||
![]() |
|||||
≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
Last updated by CSSPortal on: 25th November 2019