: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
Explorer Edge Chrome Firefox Opera Safari
101212Yes3
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
≤37184Yes11.0