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

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.

Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 23 days ago.

Related Topics

Related Articles

About the author

Stefan standing in the park in front of a green background

Frontend nerd with over ten years of experience, "Today I Learned" blogger, conference speaker, Tiny helpers maintainer, and DevRel at Checkly.