CSS :indeterminate Pseudo Class

The CSS :indeterminate pseudo-class selects a user interface element that has an indeterminate state.

The :indeterminate pseudo-class selects checkboxes, radio buttons, progress elements.

The indeterminate state of the checkbox can be set only via JavaScript. Radio buttons and progress elements can be set in HTML.

Version

CSS3

Syntax

:indeterminate {
  css declarations;
}

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      input:indeterminate {
      box-shadow: 0 0 2px 2px #666;
      }
    </style>
  </head>
  <body>
    <h2>Indeterminate selector example</h2>
    <form>
      <input type="checkbox" id="box"> Checkbox
      <script>
        var checkbox = document.getElementById("box");
        checkbox.indeterminate = true;
      </script>
    </form>
  </body>
</html>

In the following example, the entire group is in an indeterminate state when no option is selected.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      label {
      margin-right: .5em;
      position: relative;
      top: 1px;
      }
      input[type="radio"]:indeterminate + label {
      color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:indeterminate selector example</h2>
    <form>
      <input type="radio" name="option" value="yes" id="yes"> 
      <label for="yes">Yes</label>
      <input type="radio" name="option" value="no" id="no"> 
      <label for="no">No</label>
      <input type="radio" name="option" value="don't know" id="don't-know"> 
      <label for="don't-know">Don't know</label>
    </form>
  </body>
</html>



Related articles