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 > var doc = document.getElementsByTagName("input"); for (var i = 0; i < doc.length ; i++) { doc[i] .indeterminate = true ; } </script> </ body > </ html > |
chevron_right
filter_none
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 > < progress > </ body > </ html > |
chevron_right
filter_none
Output:
Supported Browsers: The browser supported by :indeterminate selector are listed below:
- Apple Safari
- Google Chrome 39.0
- Firefox 51.0
- Opera
- Internet Explorer