Open In App

CSS :indeterminate Selector

Improve
Improve
Like Article
Like
Save
Share
Report

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:

indeterminate 

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:

indeterminate 

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


Last Updated : 05 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads