:indeterminate

:indeterminate is a CSS pseudo-class selector used to select a user interface element that is in an indeterminate state.

For example, radio and checkbox elements can be toggled between checked and unchecked states, but are sometimes in an indeterminate state, neither checked nor unchecked. Similarly, a progress meter (<progress>) can be in an indeterminate state when the percent completion is unknown.

So, more specifically, the :indeterminate pseudo-class selects the following elements:

• Checkboxes (<input type="checkbox">) whose indeterminate attribute is set to true.
• Radio buttons (<input type="radio">) whose radio button group contains no radio button that is checked.
• A progress element (<progress>) that has no value attribute. The progress element is an HTML5 element that is used to represent the completion progress of a task.

The indeterminate state of an element can be set only via JavaScript. The indeterminate attribute mentioned above is only available and applicable in JavaScript, which means that you cannot set the an element’s state to indeterminate via HTML like so:

<input type="checkbox" indeterminate> <!-- doesn't work if you add it like so via HTML -->
                

To set an element to an indeterminate state, you can only do it via JavaScript. For example, if you have a set of checkboxes in a page, the following line will select the first one and change its state to an indeterminate state:

document.getElementsByTagName("input")[0].indeterminate = true;
                

Use Case: Nested Checkboxes

One might wonder how or when the :indeterminate state would be useful, or when one might want to set a checkbox’s state, for example, to be indeterminate.

A checkbox can be either checked or unchecked. That’s actually literally true. Even if the checkbox’s state is set to indeterminate, the checkbox’s visual style will change, but the underlying state will still be either checked or unchecked.

So, visually speaking, a checkbox can have three states: checked, unchecked, or indeterminate. (Again, the indeterminate state is visual only.)

The following screenshot shows how a checkbox would look in one of the three states in Chrome on Windows.

The above state styles are applied in Chrome. Checkboxes usually look different in different browsers, and so do their state state styles.

So, one use case where it might be useful to set a checkbox’s state (and style) to indeterminate is when you have nested checkboxes, where a checkbox has children checkboxes. You can see this usually in user interfaces that offer multiple choices, and where some choices have “sub-choices”.

Usually, the “parent” checkbox is set so that it can be used to toggle the styles of all its children checkboxes—checking it would check all the children, unchecking it would uncheck all the children. Unchecking it would allow the user to check some of the options in the children checkboxes, while leaving others unchecked.

So, using this concept, a checkbox can be checked if all its descendant checkboxes are checked, unchecked if all of its descendant checkboxes are unchecked, and indeterminate when only a subset of its descendant checkboxes are checked.

The following is a live demo demonstrating this use case. The demo is originally by Lea Verou. This is a fork of her original demo. The parent checkbox changes its styles based on the number of its checked descendants. Using JavaScript, its state is changed to and from the indeterminate state.

Trivia & Notes

When checkbox and radio buttons are checked, their checked state can be styled using the :checked pseudo-class.

Just like other pseudo-class selectors, the :indeterminate selector can be chained with other selectors such as :hover, for example, to provide hover styles for the element that is in an indeterminate state. For example:

progress:indeterminate:hover {
    cursor: wait;
}