The :indeterminate pseudo-class in CSS is used to select and style form elements, specifically checkboxes and radio buttons, that are in an indeterminate state. An indeterminate state represents a situation where a checkbox is neither fully checked nor fully unchecked, often used to indicate a partial selection within a group of related checkboxes. This pseudo-class does not apply to input elements of type other than checkbox or radio, and it is primarily useful in situations where hierarchical or grouped selections are represented visually.

Unlike the :checked pseudo-class, which applies when a checkbox or radio button is explicitly selected, :indeterminate reflects a state set programmatically using JavaScript, typically by setting the element's indeterminate property to true. This makes it particularly useful for building dynamic forms or interactive UIs where partial selections need to be conveyed to the user. For example, in a "Select All" scenario, if only some child checkboxes are checked, the parent checkbox might appear indeterminate to indicate that not all options are selected.

Styling with :indeterminate allows developers to differentiate indeterminate checkboxes visually. Common properties used include background-color, border-color, and box-shadow. However, it is important to remember that the indeterminate state is not submitted with a form; it is purely presentational.

Here’s a simple example:

HTML

<label>
  <input type="checkbox" id="parentCheckbox"> Parent
</label>
<label>
  <input type="checkbox" class="childCheckbox"> Child 1
</label>
<label>
  <input type="checkbox" class="childCheckbox"> Child 2
</label>

JavaScript

const parent = document.getElementById('parentCheckbox');
const children = document.querySelectorAll('.childCheckbox');

children.forEach(child => {
  child.addEventListener('change', () => {
    const allChecked = [...children].every(c => c.checked);
    const someChecked = [...children].some(c => c.checked);
    
    parent.checked = allChecked;
    parent.indeterminate = !allChecked && someChecked;
  });
});

CSS

input:indeterminate {
  background-color: #ffd966;
  border-color: #ffa500;
}

In this example, when some child checkboxes are selected, the parent checkbox visually reflects the indeterminate state. This pseudo-class provides a clean, CSS-only way to style these intermediate states without needing additional classes.