:indeterminate | Frontend Practical Guide

Overview

The :indeterminate CSS pseudo-class selects any form element whose state is indeterminate, such as checkboxes that have been set to an indeterminate state with JavaScript, or radio buttons which are members of a group in which all radio buttons are unchecked.

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`:indeterminate`	1	12	2	3	18	1
`checkbox` Applies to `<input type="checkbox">` elements	1	12	3.6	3	18	1
`progress` Applies to `<progress>` elements	6	12	6	5.1	18	5
`radio` Applies to `<input type="radio">` elements	39	79	51	10	39	10

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS

input:indeterminate {
  opacity: 0.5;
}
progress:indeterminate {
  animation: pulse 1.5s infinite;
}

Live demo

progressba-(value none=indeterminate)

CSS progressba-(value none=indeterminate) demo.

PreviewFullscreen

radio button(selection=indeterminate)

CSS radio button(selection=indeterminate) demo.

PreviewFullscreen

Use cases

Using :indeterminate
The :indeterminate CSS pseudo-class selects any form element whose state is indeterminate, such as checkboxes that have been set to an indeterminate state with JavaScript, or radio buttons which are members of a group in which all radio buttons are unchecked.

Cautions

May not be supported in older browsers.