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> 

Output:
indeterminate

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> 

Output:
indeterminate

Supported Browsers: The browser supported by :indeterminate selector are listed below:

Apple Safari
Google Chrome 39.0
Firefox 51.0
Opera
Internet Explorer

My Personal Notes

Recommended Posts: