How to match HTML elements with an indeterminate state (#tilPost)

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

Today 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.

[Interactive component: visit the article to see it...]

:indeterminate is also cross-browser supported. 🎉

MDN Compat Data (source)

Browser support info for :indeterminate

1	18	12	2	4	3	1	1.0	≤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.