How to match HTML elements with an indeterminate state
- Published at
- Updated at
- Reading time
- 2min
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 settrue
- and the mentioned
progress
elements without a definedvalue
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.
HTML
CSS
:indeterminate
is also cross-browser supported. ๐
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.
Join 5.2k readers and learn something new every week with Web Weekly.