CSS :indeterminate: show a mixed selection without inventing its meaning

When to use it

A batch review panel offers a parent checkbox for 27 claims. Some claims are selected, so application code sets the parent's indeterminate property and updates a nearby text count. CSS emphasizes the native checkbox and its adjacent label without replacing the checkbox glyph. When every claim is selected, the code sets checked and clears indeterminate; when none are selected, it clears both. Test pointer and keyboard toggles, a selection changed elsewhere in the UI, a rerender that replaces the input node, and form submission. The native checkbox may leave the mixed state when activated, so the application must recompute it from its children. A screen reader needs a meaningful name and the current mixed state from the control; a border color cannot explain which records are selected. Keep the count as real text, not generated content. Never assume that an indeterminate parent means the backend has approved a partial batch.

.batch-review input[type="checkbox"]:indeterminate { accent-color: #175f84; }
.batch-review input[type="checkbox"]:indeterminate + label { font-weight: 700; color: #173f56; }
.batch-review input[type="checkbox"]:focus-visible { outline: 3px solid #1c5e87; outline-offset: 3px; }

Cost and verification

The paint cost is negligible. The larger cost is keeping the DOM property synchronized with actual selection state after every update. CSS cannot compute the number of selected children or change a checkbox's submitted value. Some high-contrast systems override accent-color; the native mixed mark and the text count must remain usable. Avoid drawing a custom dash with a pseudo-element unless the entire control replacement has been tested across input methods and assistive technology. If the batch contains no eligible items, disable or explain the parent control through HTML and logic rather than styling it as merely pale.

Common Mistakes

• Do not expect an indeterminate HTML attribute to set the state.
• Do not treat mixed appearance as a third submitted value.
• Do not omit the textual selection count and real state synchronization.

Connected lessons

• CSS Property Decisions
• CSS form appearance and accent color: retain native behavior
• CSS form states: make errors and disabled fields explicit
• HTML radio and checkbox controls: submit choices with explicit values