:indeterminate CSS Pseudo Class

Description

The :indeterminate pseudo-class in CSS is a selector that targets form elements, such as checkboxes and radio buttons, when their state is indeterminate. This state occurs when the element's checked or selected status is neither true (checked/selected) nor false (unchecked/unselected).

For example, a checkbox may be in an indeterminate state when it is part of a group of checkboxes where some are checked and some are unchecked, or when its indeterminate property is set programmatically using JavaScript.

Using the :indeterminate pseudo-class allows you to apply specific styles to elements in this intermediate state, making it useful for indicating to users that a selection is not yet complete or that a group of options is partially selected.

Here's a simple example of how you might use it in CSS:

input[type="checkbox"]:indeterminate {
/* Apply styles to indeterminate checkboxes */
background-color: yellow;
border: 2px solid orange;
}

In this example, any checkbox input element with the :indeterminate pseudo-class will have a yellow background and an orange border. This can help visually highlight checkboxes that are neither checked nor unchecked.

Syntax

element:indeterminate {
  /* ... */
}

Example

<div>
<input type="checkbox" id="checkbox">
<label for="checkbox">This label starts out green.</label>
</div>
<br>
<p>Progress bar without a value; i.e. in an indeterminate state.</p>
<progress>
<script>
var inputs = document.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++) {
inputs[i].indeterminate = true;
}
</script>
input:indeterminate + label {
background: green;
}
progress {
margin: 4px;
}
progress:indeterminate {
border: 1px solid green;
}

Browser Support

The following table will show you the current browser support for the CSS :indeterminate pseudo class.

Desktop
Edge Chrome Firefox Opera Safari
121293
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18410.11137

Last updated by CSSPortal on: 1st October 2023