Artboard 16light, inspiration, solution, idea, innovation,Google 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
1181224311.0โ‰ค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.

Related Topics

Related Articles