CSS :indeterminate Pseudo Class

CSS :indeterminate Pseudo-Class

The :indeterminate pseudo-class applies styles to checkboxes, radio buttons, and progress bars that are in an uncertain state (neither checked nor unchecked).

1. Syntax

selector:indeterminate {
  /* CSS styles here */
}

✅ Targets elements that are not explicitly checked or unchecked.

2. When to Use :indeterminate?

• Checkboxes that are in a mixed/partially selected state.

• Radio buttons that have no selection yet.

• Progress bars with an unknown completion percentage.

3. Example – Indeterminate Checkbox (Partial Selection)

<label>
  <input type="checkbox" id="parentCheckbox"> Select All
</label>
<ul>
  <li><input type="checkbox" class="child"> Option 1</li>
  <li><input type="checkbox" class="child"> Option 2</li>
  <li><input type="checkbox" class="child"> Option 3</li>
</ul>

input:indeterminate {
  background-color: orange;
}

✅ The parent checkbox turns orange when some (but not all) child checkboxes are checked.

💡 JavaScript to Make Checkbox Indeterminate

const parentCheckbox = document.getElementById("parentCheckbox");
const childCheckboxes = document.querySelectorAll(".child");

childCheckboxes.forEach((checkbox) => {
  checkbox.addEventListener("change", () => {
    const checkedCount = document.querySelectorAll(".child:checked").length;
    if (checkedCount === 0) {
      parentCheckbox.checked = false;
      parentCheckbox.indeterminate = false;
    } else if (checkedCount === childCheckboxes.length) {
      parentCheckbox.checked = true;
      parentCheckbox.indeterminate = false;
    } else {
      parentCheckbox.checked = false;
      parentCheckbox.indeterminate = true;
    }
  });
});

✅ The parent checkbox becomes indeterminate when some children are checked.

4. Example – Indeterminate Progress Bar

<progress id="loading"></progress>

progress:indeterminate {
  background-color: gray;
}

✅ The progress bar gets a gray background when its value is not set.

5. Browser Support

✅ Fully supported in Chrome, Edge, Firefox, Safari, and Opera.

6. Best Practices

✔ Use :indeterminate for checkboxes in tree structures (e.g., folder selection).
✔ Combine with JavaScript for dynamic UI behavior.
✔ Use on <progress> elements when loading time is unknown.