Published at
Updated at
Reading time
2min
This post is part of my Today I learned series in which I share all my web development learnings.

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.

HTML
CSS
Preview

:indeterminate is also cross-browser supported. ๐ŸŽ‰

MDN Compat Data (source)
Browser support info for :indeterminate
chromechrome_androidedgefirefoxfirefox_androidsafarisafari_iossamsunginternet_androidwebview_android
111222311.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.

If you enjoyed this article...

Join 5.2k readers and learn something new every week with Web Weekly.

Web Weekly โ€” Your friendly Web Dev newsletter
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles