:indeterminate CSS Pseudo Class


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.


element:indeterminate { … } 


<input type="checkbox" id="checkbox">
<label for="checkbox">This label starts out green.</label>
<p>Progress bar without a value; i.e. in an indeterminate state.</p>
var inputs = document.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++) {
inputs[i].indeterminate = true;
input:indeterminate + label {
background: green;
progress {
margin: 4px;
progress:indeterminate {
border: 1px solid green;

Browser Support

Explorer Edge Chrome Firefox Opera Safari
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung

Last updated by CSSPortal on: 25th November 2019