CSS Reference Pseudo-class

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

checkbox-states
Default checkbox state styles applied by 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.

View this demo on the Codrops Playground

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

Examples

The following snippet will select the label of a checkbox that is in an indeterminate state and make it grey.

input[type="checkbox"]:indeterminate + label {
    color: grey;
}
                

Live Demo

The following demo will turn the color of the checkbox’s label into deepPink if it is in an indeterminate state.

View this demo on the Codrops Playground

Applying :indeterminate to a progress bar

The following demo changes the styles of a progress bar in an indeterminate state. The progress bar’s state is indeterminate because its value attribute has been removed. The second progress bar is the one in an indeterminate state, and thus it is the one styled using the :indeterminate pseudo-class.

Styling progress bars is browser-specific and is a long topic which is outside the scope of this entry. The progress’ value bar and background styling isn’t consistent across all browsers. To learn more about the HTML5 progress element and how to style it, check out this article on the Treehouse Blog: How to use the Meter & Progress Elements.

For demonstration purposes, the second progress bar in the following demo styled using :indeterminate will turn the mouse cursor into a “wait” cursor when you hover over it. This will work in all browsers that support using :indeterminate on progress bars. To know whether or not it is supported in your browser, please see the browser support section below.

Additionally, the indeterminate progress bar gets a gray background color, while the first progress bar gets a light grey background color and a blue progress value bar. The result of these styles is, however, inconsistent among browsers.

The following is a screenshot of the demo as it looks in WebKit-based browsers (including post-WebKit Opera).

indeterminate-demo-screenshot
The result of applying :indeterminate styles to a progress bar (the second one) in an indeterminate state in WebKit-based browsers.

Hover over the second progress bar in the demo to see the mouse cursor change. (Depending on your browser, the progress bars may or may not look like the above screenshot.)

View this demo on the Codrops Playground

Browser Support

The :indeterminate pseudo-class is supported in Chrome, Firefox, Safari, Opera 10.60+, Internet Explorer 9+ and on Android (?) and iOS (?), to be used on checkboxes.

Using the :indeterminate pseudo-class on a progress element is supported in Chrome, Firefox, Safari, Opera, and Internet Explorer 10+.

Written by

Last updated February 3, 2015 at 12:33 pm by Pedro Botelho

Do you have a suggestion, question or want to contribute? Submit an issue.