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:
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> var doc = document.getElementsByTagName("input"); for (var 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> <progress></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
Please Login to comment...