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>

Try it Yourself »

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>