CSS :indeterminate Pseudo-Class

CSS :indeterminate Pseudo-Class

The CSS :indeterminate pseudo-class selects form controls whose state is not determined. It applies to checkboxes with an indeterminate property, radio button groups without a selected option, and progress elements without a defined value.

:indeterminate Syntax

selector:indeterminate {
  property: value;
}

The :indeterminate pseudo-class is added to a selector without a space. It matches supported controls while they are in an indeterminate state.

Checkbox Example

input[type="checkbox"]:indeterminate {
  outline: 2px solid #0088cc;
}

This rule adds an outline to checkboxes whose indeterminate property is set to true.

Radio Button Example

input[type="radio"]:indeterminate {
  outline: 2px solid #0088cc;
}

This rule targets radio buttons in a group where no option is selected.

Progress Element Example

progress:indeterminate {
  accent-color: #0088cc;
}

This rule targets a progress element whose progress cannot be determined because it has no value.

How :indeterminate Works

The indeterminate state represents a condition in which a control does not have a definite selection or progress value.

The meaning of this state depends on the type of element.

Supported Elements

Different from Invalid Values

An indeterminate state does not necessarily mean that a form control is invalid. It describes the control's selection or progress state rather than its overall validation status.

Automatic State Matching

The browser updates :indeterminate matching when the relevant control state changes. CSS can respond to that state without additional styling logic.

Indeterminate Checkboxes

Checkboxes can have an indeterminate visual state in addition to their checked and unchecked appearances.

This state is commonly used when a parent checkbox represents several child checkboxes and only some of them are selected.

HTML

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

JavaScript

const checkbox = document.getElementById("select-all");
checkbox.indeterminate = true;

The indeterminate property must be set through JavaScript. It is not an HTML attribute that can be added directly to the checkbox markup.

CSS

input[type="checkbox"]:indeterminate {
  outline: 2px solid #0088cc;
  outline-offset: 3px;
}

The checkbox matches :indeterminate after its property is set to true.

Checked vs. Indeterminate

The checked and indeterminate properties are independent. A checkbox can have its checked property set to true while displaying an indeterminate appearance.

The indeterminate property affects the checkbox's visual state but does not change the checked value submitted with a form.

Indeterminate Radio Buttons

Radio buttons can match :indeterminate when no option in their group is selected.

HTML

<fieldset>
  <legend>Choose a Size</legend>
  <input type="radio" id="small" name="size" value="small">
  <label for="small">Small</label>
  <input type="radio" id="large" name="size" value="large">
  <label for="large">Large</label>
</fieldset>

Neither radio button has the checked attribute. Initially, both radio buttons match :indeterminate.

CSS

input[type="radio"]:indeterminate {
  outline: 2px solid #0088cc;
  outline-offset: 3px;
}

The outline appears while no option in the group is selected.

Selecting an Option

When the user selects one radio button, the group is no longer indeterminate, and the :indeterminate styles stop applying.

No JavaScript Required

Unlike checkboxes, radio buttons do not require JavaScript to enter their initial indeterminate state.

Indeterminate Progress Elements

The HTML <progress> element represents the completion progress of a task.

When its value attribute is omitted, the browser treats the progress as indeterminate.

Indeterminate Progress

<progress>Loading</progress>

The browser displays an indeterminate progress indicator because no completion value is provided.

Determinate Progress

<progress value="50" max="100">50%</progress>

This progress element represents a task that is 50 percent complete.

CSS

progress:indeterminate {
  accent-color: #0088cc;
}

The selector matches only when the progress element is indeterminate. The appearance of native progress indicators varies by browser and operating system.

Changing Progress with JavaScript

const progress = document.querySelector("progress");
progress.value = 50;

Assigning a valid progress value changes the element from an indeterminate state to a determinate state.

:indeterminate vs. :checked

The :indeterminate and :checked pseudo-classes represent different selection states.

Comparison

CSS Example

input[type="checkbox"]:checked {
  outline: 2px solid #008000;
}
input[type="checkbox"]:indeterminate {
  outline: 2px solid #0088cc;
}

These rules provide different outlines for checked and indeterminate checkboxes.

Important Difference

An indeterminate checkbox is not simply an unchecked checkbox. Its indeterminate property is separate from its checked property, and the browser can display an indeterminate appearance regardless of the underlying checked value.

JavaScript and Indeterminate States

JavaScript is commonly used to control the indeterminate state of checkboxes, particularly when implementing Select All functionality.

Setting the State

checkbox.indeterminate = true;

Clearing the State

checkbox.indeterminate = false;

Checking the State

if (checkbox.indeterminate) {
  console.log("The checkbox is indeterminate.");
}

Updating a Parent Checkbox

const selected = 2;
const total = 3;

parentCheckbox.checked = selected === total;
parentCheckbox.indeterminate = selected > 0 && selected < total;

This example makes the parent checkbox indeterminate when some, but not all, child options are selected.

User Interaction

When a user activates an indeterminate checkbox, the browser normally clears its indeterminate state and updates its checked state.

Applications that manage parent and child checkboxes should recalculate the parent state whenever the child selections change.

:indeterminate Specificity

The :indeterminate pseudo-class contributes a specificity of 0-1-0.

Specificity Examples

Specificity Example

input[type="checkbox"] {
  outline: 2px solid transparent;
}
input[type="checkbox"]:indeterminate {
  outline-color: #0088cc;
}

When both rules apply, the second selector has greater specificity and changes the outline color.

Practical Uses

The :indeterminate pseudo-class is useful when a control needs to communicate a partial selection or an unknown progress value.

Select All Checkboxes

Use an indeterminate parent checkbox when some child options are selected but others are not.

Permission Settings

Group-level checkboxes can indicate that permissions are enabled for only some items.

Radio Groups

Style radio button groups that do not yet have a selected option.

Loading Indicators

Use indeterminate progress elements when a task is running but its completion percentage cannot be calculated.

Visual Feedback

Use borders, outlines, or other visual treatments to distinguish indeterminate controls from their ordinary states.

Limitations

The :indeterminate pseudo-class only matches elements that support an indeterminate state.

Checkbox State Requires JavaScript

Checkboxes cannot be made indeterminate by adding an HTML attribute. The state must be set through the JavaScript indeterminate property.

Visual State Only

For checkboxes, the indeterminate property changes the displayed state but does not change the underlying checked value used for form submission.

Radio Button Behavior

Radio buttons are indeterminate when no option in their group is selected. Once an option is selected, the group no longer matches this state.

Progress Appearance

Native progress indicators vary across browsers and operating systems. Some CSS properties may not visibly affect their internal appearance.

Not General Validation

The selector does not indicate whether a form control is valid or invalid.

Accessibility

Indeterminate states should be understandable to users who rely on keyboard navigation, screen readers, or other assistive technologies.

Use Native Controls

Prefer native checkbox, radio button, and progress elements because browsers provide built-in semantics and interaction behavior.

Provide Clear Labels

Associate checkboxes and radio buttons with descriptive labels. Explain what a partially selected group represents when necessary.

Mixed Checkbox States

Native indeterminate checkboxes can expose a mixed state through accessibility APIs. For custom checkbox widgets, use the appropriate ARIA semantics, such as aria-checked="mixed", and implement the required keyboard behavior.

Progress Information

Provide a descriptive label for progress elements so users understand which task is running.

Do Not Rely on Color Alone

Use the native indeterminate indicator, text, or other accessible information in addition to color changes.

Best Practices

• Use :indeterminate only with controls that support an indeterminate state.
• Set checkbox indeterminate states through JavaScript.
• Use indeterminate parent checkboxes to represent partial selections.
• Recalculate parent checkbox states when child selections change.
• Use progress elements without a value when completion cannot be determined.
• Preserve native control semantics and keyboard interaction.
• Provide descriptive labels and clear state information.
• Test the visual appearance across browsers and operating systems.

:indeterminate Example

This example demonstrates a parent checkbox that becomes indeterminate when only some child checkboxes are selected. It also includes a progress element without a value to demonstrate indeterminate progress.

HTML

<div class="indeterminate-demo">
  <label class="parent-option">
    <input type="checkbox" id="select-all">
    Select All
  </label>
  <div class="child-options">
    <label><input type="checkbox" class="item" checked> Option 1</label>
    <label><input type="checkbox" class="item"> Option 2</label>
    <label><input type="checkbox" class="item"> Option 3</label>
  </div>
  <p>Indeterminate Progress:</p>
  <progress aria-label="Loading example">Loading</progress>
</div>

CSS

.indeterminate-demo label {
  display: block;
  margin-bottom: 8px;
}
.indeterminate-demo .parent-option {
  font-weight: bold;
}
.indeterminate-demo .child-options {
  margin-left: 20px;
}
.indeterminate-demo input:indeterminate {
  outline: 2px solid #0088cc;
  outline-offset: 2px;
}
.indeterminate-demo progress {
  width: 100%;
  max-width: 250px;
}
.indeterminate-demo progress:indeterminate {
  accent-color: #0088cc;
}

JavaScript

const selectAll = document.getElementById("select-all");
const items = document.querySelectorAll(".item");

function updateParent() {
  const checked = [...items].filter(item => item.checked).length;
  selectAll.checked = checked === items.length;
  selectAll.indeterminate = checked > 0 && checked < items.length;
}

selectAll.addEventListener("change", () => {
  items.forEach(item => {
    item.checked = selectAll.checked;
  });
  updateParent();
});

items.forEach(item => {
  item.addEventListener("change", updateParent);
});

updateParent();

Browser Result

Play in Editor

Note: The Select All checkbox begins in an indeterminate state because only one child checkbox is selected. Selecting all options checks the parent, while clearing all options unchecks it. The progress element remains indeterminate because no value is assigned.

Browser Support

Baseline: Widely available. The :indeterminate pseudo-class is supported in modern versions of Chrome, Edge, Firefox, Safari, and other major browsers. The appearance of indeterminate controls can vary by browser and operating system.

For current compatibility information, visit Can I Use? and search for :indeterminate.

Specifications

The :indeterminate pseudo-class is defined in CSS Selectors Level 4 as an input state pseudo-class. The HTML Living Standard defines the indeterminate states of checkboxes, radio buttons, and progress elements.

Selectors Level 4 - :indeterminate

HTML Living Standard - :indeterminate