How to match HTML elements with an indeterminate state
- Published at
- Updated at
- Reading time
Adam's excellent guide "Building a loading bar component" covers all things about the
Today I learned that
progress HTML elements are considered to be in an indeterminate state if you don't define a element
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
- and the mentioned
progresselements without a defined
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.
:indeterminate is also cross-browser supported. 🎉
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.