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; } 

: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:

<input type="checkbox"> elements whose indeterminate property is set to true by JavaScript <input type="radio"> elements, when all radio buttons with the same name value in the form are unchecked <progress> elements in an indeterminate state

Syntax

:indeterminate

Examples

Checkbox & radio button

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

HTML

<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> 

CSS

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; } 

JavaScript

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

Result

Progress bar

HTML

<progress></progress> 

CSS

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

Result

Specifications

Specification
HTML Standard # selector-indeterminate
Selectors Level 4 # indeterminate

See also

Web forms — Working with user data Styling web forms The <input type="checkbox"> element's indeterminate attribute <input> and the HTMLInputElement interface which implements it. The :checked CSS selector lets you style checkboxes based on whether they're checked or not

Last modified: Jan 3, 2022, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語Русский中文 (简体) Change language