W3docs
en
Log in

CSS :indeterminate Pseudo Class

The :indeterminate CSS pseudo-class selects the elements that are in an indeterminate state. Read about the pseudo-class & practice with examples.

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

The :indeterminate pseudo-class selects:

  • Checkboxes (<input type="checkbox">) where the indeterminate DOM property is set to true.
  • Radio buttons (<input type="radio">) when no option in the group is selected.
  • Progress elements (<progress>) when the value attribute is omitted.
Info

The :indeterminate state is read-only in CSS. For checkboxes, it must be set via JavaScript. Radio buttons and progress elements display this state under specific conditions. If a form is reset, a checkbox's indeterminate property is cleared.

The :checked pseudo-class is used to style the checked state of checkboxes 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

CSS :indeterminate syntax example

:indeterminate {
  css declarations;
}

Example of the :indeterminate selector:

CSS :indeterminate code 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>
Try it Yourself »

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

Example of the :indeterminate selector with no option selected:

CSS :indeterminate another code 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>
Try it Yourself »

Practice

Practice

Which of the following states about the indeterminate attribute in CSS is correct?