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:
html
<!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:
html
<!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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
05 Jul, 2023
Like Article
Save Article