CSS :indeterminate Pseudo-class

Definition and Usage

The :indeterminate pseudo-class matches a form control in an indeterminate state — neither fully on nor off.

It applies to checkboxes with indeterminate = true (set in JavaScript), radio buttons in a group where none are checked, and <progress> elements with no value attribute. It is not the same as :checked.

CSS Syntax

Often combined with a type or sibling: input:indeterminate + label or progress:indeterminate.

Common Patterns

How to Use :indeterminate

Create the indeterminate state first, then style it (or its neighbors).

1. For checkboxes, set element.indeterminate = true in JavaScript (often for Select All).
2. For radios, leave the whole named group unchecked to start.
3. For progress, omit the value attribute until you know the amount.
4. Style with :indeterminate and/or + label; keep labels accessible with for/id.

Live Preview

Toggle the checkbox’s indeterminate flag, pick a radio, and watch the valueless progress bar. Labels turn green while the matching control is :indeterminate.

CSS Examples

Each snippet focuses on :indeterminate. Use Try It Yourself for a live editor.

<style>
  input:indeterminate + label {
    color: #16a34a;
    font-weight: 700;
  }
</style>

<input type="checkbox" id="all">
<label for="all">Select all</label>

<script>
  document.getElementById("all").indeterminate = true;
</script>

<style>
  input[type="radio"]:indeterminate + label {
    color: #16a34a;
    font-weight: 700;
  }
</style>

<input type="radio" name="size" id="s">
<label for="s">Small</label>
<input type="radio" name="size" id="l">
<label for="l">Large</label>

<style>
  progress:indeterminate {
    outline: 2px solid #16a34a;
    outline-offset: 2px;
  }
</style>

<progress></progress>

Key Takeaways