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
