:indeterminate

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

The :indeterminateCSSpseudo-class represents any form element whose state is indeterminate, such as checkboxes that have been set to an indeterminate state with JavaScript, radio buttons which are members of a group in which all radio buttons are unchecked, and <progress> elements with no value attribute.

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

Elements targeted by this selector are:

Syntax

css
:indeterminate { /* ... */ }

Examples

Checkbox & radio button

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

HTML

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" value="val1" /> <label for="radio1">First radio label starts out lime.</label> </div> <div> <input type="radio" id="radio2" name="radioButton" value="val2" /> <label for="radio2">Second radio label also starts out lime.</label> </div> </fieldset>

CSS

css
input:indeterminate + label { background: lime; }

JavaScript

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

Result

Progress bar

HTML

html
<progress></progress>

CSS

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

Result

Specifications

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

Browser compatibility

See also