Artboard 16light, inspiration, solution, idea, innovation,ionicons-v5_logosGoogle Sheets iconSwift icon
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.

Playground
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 3 days ago.

Related Topics

Related Articles