Even Better Styled HTML/CSS Checkboxes

*** WARNING *** An earlier version of this article was based on incorrect information about the need for browser prefixes for Safari, as well as assuming that Safari didn’t use a broken and nonsensical implementation of checkboxes where it will apply a margin around generated content that can’t be turned off. I have rewritten the demo to use absolute positioning of the child element fixing Safari support.

About a year and a half ago I wrote about how one can create fancier easy to size checkboxes using EM and an extra tag after the INPUT itself. At the time I wrote that it was the best way IMHO of handling it. However…

This is now 2022, and there’s a CSS property that is increasingly real-world deployable that lets us do away with using any extra elements altogether!

Now warning, if you need to support versions of Firefox made before 2017 (v54) this isn’t gonna fly. The laugh being even IE beat FF to market on this one. But honestly anyone using browsers that old deserves to have a non-working web, given the security holes those browsers have ALONE.

There’s also the simple fact that whilst Microsoft and Firefox dragged their heels on this, Safari — and by extension Chrome — has had this since version 3.x way the devil back in 2007! Thus if you’re using it with something like Electron, no hassles at…