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 ( <input type="checkbox">) with indeterminate attribute set to "true".
  • Radio buttons (<input type="radio">) when the radio button group does not contain checked radio button.
  • Progress element (<progress>) with no value attribute.

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

The :checked pseudo-class is used to style the checked state of checkbox and radio buttons. The :indeterminate pseudo-class can be linked with other selectors such as :hover providing hover styles for the element that is in an indeterminate state.

Version

CSS Basic User Interface Module Level 3

CSS Selectors Level 4

Disabled Elements — HTML5

Syntax

:indeterminate {
  css declarations;
}

Example of the :interminate selector:

<!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 of the :interminate selector with no option selected:

<!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>

Browser support

39.0+ 12.0+ 51.0+ 10.1+ 26.0+

Practice Your Knowledge

Which statement is incorrect about CSS :indeterminate pseudo class?



Do you find this helpful?

Related articles