CSS :indeterminate Selector
The :indeterminate selector in CSS is used to select any form elements that are in indeterminate state i.e a state that is neither checked nor unchecked. Elements targeted by this selector are:
- <input = “checkbox”> elements whose indeterminate property is set to true by JavaScript
- <input = “radio”> elements, when all radio buttons with the same name value in the form are unchecked
- <progress> elements in an indeterminate state
Example 1:
<!DOCTYPE html>
<html>
<head>
<title>
CSS :indeterminate selector
</title>
<style>
input:indeterminate+label {
background: green;
color: white;
padding: 4px;
}
input:indeterminate {
box-shadow: 0 0 1px 1px green;
}
</style>
</head>
<body style="text-align: center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>
CSS :indeterminate selector
</h2>
<div>
<input type="checkbox" id="checkbox">
<label for="checkbox">
This is an indeterminate checkbox.
</label>
</div>
<br>
<div>
<input type="radio" id="radio" name="abc">
<label for="radio">
This is an indeterminate radio button.
</label>
</div>
<script>
let doc = document.getElementsByTagName("input");
for (let i = 0; i < doc.length; i++) {
doc[i].indeterminate = true;
}
</script>
</body>
</html>
Output:
Example 2:
<!DOCTYPE html>
<html>
<head>
<title>
CSS :indeterminate selector
</title>
<style>
progress:indeterminate {
opacity: 0.5;
background: lightgray;
box-shadow: 2px 2px 4px 4px green;
}
</style>
</head>
<body style="text-align: center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>
CSS :indeterminate selector
</h2>
<p>An indeterminate progress bar.</p>
</body>
</html>
Output:
Supported Browsers: The browser supported by :indeterminate selector are listed below:
- Apple Safari 3.0
- Google Chrome 1.0
- Edge 12.0
- Firefox 2.0
- Opera 9.0
CSS :indeterminate Selector – FAQs
What does the :indeterminate selector do in CSS?
The :indeterminate selector targets form elements, like checkboxes, that are in an indeterminate state, meaning they are neither checked nor unchecked.
How can I style a checkbox when it is in an indeterminate state?
Use the :indeterminate selector, like input[type=”checkbox”]:indeterminate { background-color: gray; }, to style a checkbox in an indeterminate state.
Can the :indeterminate state be set using HTML alone?
No, the :indeterminate state is usually set via JavaScript; it is not directly settable using HTML attributes alone.
Does :indeterminate apply to all form elements?
No, the :indeterminate selector is mainly used for checkboxes, but can also be applied to progress elements to represent an indeterminate state.
Is the :indeterminate selector widely supported by browsers?
Yes, the :indeterminate selector is supported by all modern browsers.
