: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 | Yes | 3 |
| Tablets / Mobile | |||||
 |
|
|
|
|
 |
| ≤37 | 18 | 4 | Yes | 1 | 1.0 |
Last updated by CSSPortal on: 25th November 2019