/* Selects any <input> whose state is indeterminate */ input:indeterminate {   background: lime; } 

:indeterminate

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:

Syntax

:indeterminate

Examples

Checkbox & radio button

This example applies special styles to the labels associated with indeterminate form fields.

<fieldset>   <legend>Checkbox</legend>   <div>     <input type="checkbox" id="checkbox">     <label for="checkbox">This checkbox label starts out lime.</label>   </div> </fieldset>  <fieldset>   <legend>Radio</legend>   <div>     <input type="radio" id="radio1" name="radioButton">     <label for="radio1">First radio label starts out lime.</label>   </div>   <div>     <input type="radio" id="radio2" name="radioButton">     <label for="radio2">Second radio label also starts out lime.</label>   </div> </fieldset> 

input:indeterminate + label {   background: lime; } 

fieldset {     padding: 1em 0.75em; }  fieldset:first-of-type {     margin-bottom: 1.5rem; }  fieldset:not(:first-of-type) > div:not(:last-child) {     margin-bottom: 0.5rem; } 

const inputs = document.getElementsByTagName("input");  for (let i = 0; i < inputs.length; i++) {   inputs[i].indeterminate = true; } 

Progress bar

<progress></progress> 

progress {   margin: 4px; }  progress:indeterminate {   width:80vw;   height:20px; } 

Specifications

See also

Last modified: Jan 3, 2022, by MDN contributors