CSS :indeterminate Selector

What You’ll Learn

The :indeterminate pseudo-class styles checkboxes and other controls in a partial or unknown state — neither fully checked nor unchecked.

Introduction

The :indeterminate selector in CSS targets checkboxes or radio buttons that are in an indeterminate state. This typically occurs when a checkbox’s selection is unclear, such as when it is partially checked.

It is commonly used in “Select All” patterns where some child options are checked but not all of them, giving users a clear visual cue for partial selection.

Definition and Usage

Use :indeterminate on its own or with an element selector: input[type="checkbox"]:indeterminate. The state must be set in JavaScript — there is no HTML attribute for indeterminate.

📝 Syntax

The syntax for the :indeterminate pseudo-class is:

:indeterminate {
  /* CSS properties */
}

The :indeterminate pseudo-class applies to <input type="checkbox">, <input type="radio">, and <progress> elements in an indeterminate state.

Basic Example

input[type="checkbox"]:indeterminate {
  accent-color: #eab308;
}

input[type="checkbox"]:checked {
  accent-color: #16a34a;
}

Three Checkbox States

Syntax Rules

• Indeterminate must be set via JavaScript — no HTML attribute exists.
• An indeterminate checkbox does not match :checked.
• accent-color is the easiest way to tint native checkboxes in modern browsers.
• Style :indeterminate before or with higher specificity than :checked when both could apply after state changes.
• <progress> without a value is natively indeterminate.

Related Selectors

• :checked — fully selected checkboxes and radios
• :default — the default selected option in a form
• :disabled — inactive controls that cannot be changed
• :has() — style a parent when it contains an indeterminate child
• progress element — shows loading; indeterminate when value is unknown

When to Use :indeterminate

:indeterminate improves multi-select and loading UIs:

• Select All checkboxes — Show a dash when some but not all child items are selected.
• Tree views and categories — Indicate partial selection in nested option lists.
• Data tables — Header checkbox reflects mixed row selection state.
• Progress bars — Style <progress> when loading duration is unknown.
• Form wizards — Visual distinction between all, none, and some options selected.

Examples Gallery

Practice :indeterminate with Select All checkboxes, accent colors, label styling, and progress bars.

<style>
  input:indeterminate {
    accent-color: #eab308;
  }
  input:checked {
    accent-color: #16a34a;
  }
</style>

<input type="checkbox" id="selectAll">
<label for="selectAll">Select All</label>
<input type="checkbox" id="opt1" checked> <label for="opt1">Option 1</label>
<input type="checkbox" id="opt2"> <label for="opt2">Option 2</label>

<script>
  document.getElementById('selectAll').indeterminate = true;
</script>

input[type="checkbox"] {
  accent-color: #94a3b8;
  width: 1.1rem;
  height: 1.1rem;
}

input[type="checkbox"]:checked {
  accent-color: #16a34a;
}

input[type="checkbox"]:indeterminate {
  accent-color: #eab308;
}

input:indeterminate + label {
  color: #a16207;
  font-weight: 700;
  background: #fef9c3;
  padding: 0.15rem 0.4rem;
  border-radius: 0.3rem;
}

input:checked + label {
  color: #15803d;
  font-weight: 600;
}

progress:indeterminate {
  accent-color: #2563eb;
  width: 100%;
  height: 0.65rem;
}

progress {
  border-radius: 0.35rem;
}

💬 Usage Tips

• JavaScript required — Set checkbox.indeterminate = true; there is no HTML attribute.
• Pair with :checked — Style all three states: default (unchecked), :checked, and :indeterminate.
• Select All logic — Set indeterminate when some children are checked; clear it when all or none are checked.
• accent-color — The simplest cross-browser approach for native checkbox tinting.
• progress element — Use <progress> without value for unknown-duration loading.

⚠️ Common Pitfalls

• No HTML indeterminate attribute — The old indeterminate HTML attribute does not exist; use JavaScript only.
• Not the same as :checked — Indeterminate checkboxes do not match :checked; style both separately.
• :unchecked is non-standard — Avoid relying on :unchecked; use the default style for unchecked boxes instead.
• Clicking clears indeterminate — User interaction typically resets indeterminate to checked or unchecked.
• Browser rendering differences — The dash icon and accent-color support vary; test in major browsers.

♿ Accessibility

• aria-checked="mixed" — Mirror the indeterminate visual state for screen readers with this ARIA attribute.
• Label every checkbox — Use <label for="..."> so assistive tech announces the control name.
• Do not rely on color alone — The browser’s dash icon plus label text should convey partial selection.
• Keyboard support — Indeterminate checkboxes remain focusable and operable via Space key.
• State announcements — Consider live regions or ARIA updates when toggling between all, none, and mixed states.

💡 Best Practices