How to match HTML elements with an indeterminate state

Adam's excellent guide "Building a loading bar component" covers all things about the progress element. It's a good read because covering HTML, CSS and JavaScript, and taught me something new!

I learned that progress HTML elements are considered to be in an indeterminate state if you don't define a element value.

But it's not only the progress element that can have this state. It's:

• radio buttons in a group when no radio is selected
• checkboxes with an indeterminate JavaScript property set true
• and the mentioned progress elements without a defined value

Why's that interesting? Indeterminate elements can be selected with the :indeterminate pseudo-class. 😲 (yeah, I haven't seen that one before either).

See below that :indeterminate matches all radio elements in a group if there's none preselected. Thus, the group has an indeterminate state.

If you select one radio, the group loses the indeterminate state, and the purple styling disappears.

<input id="1" type="radio" 
 name="something" value="1">
<label for="1">One</label>

<input id="2" type="radio"
 name="something" value="2">
<label for="2">Two</label>
<input id="1" type="radio" 
 name="something" value="1">
<label for="1">One</label>

<input id="2" type="radio"
 name="something" value="2">
<label for="2">Two</label>

input:indeterminate + label {
 background: purple;
}

body {
  color: white;
}
input:indeterminate + label {
 background: purple;
}

body {
  color: white;
}

:indeterminate is also cross-browser supported. 🎉

MDN Compat Data (source)

Browser support info for `:indeterminate`

1	1	12	2	2	3	1	1.5	≤37

If you're looking at the compatibility table on MDN, it links to a very old Safari bug ticket. I tested the above demo and it worked fine.