: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 | |||||
 |
 |
 |
 |
 |
|
| 12 | 1 | 2 | 9 | 3 | |
| Tablets / Mobile | |||||
|
|
|
|
 |
 |
| 18 | 4 | 10.1 | 1 | 1 | 37 |
Last updated by CSSPortal on: 1st October 2023