CSS :indeterminate pseudo-class

Targets input elements like radio buttons and checkboxes that are not selected or unselected. When the input element is active, the indeterminate state is gone, thus, the styling changes.

Checkbox: This checkbox has been given the indeterminate state via JavaScript.

Radio buttons: A group of radio buttons without a default/pre-selected radio button set.

Note: If you’re seeing this Pen in Editor Mode, press the “Run” button on top to reset the inputs. Otherwise, refresh the page.