3 ms·
Many original HTML elements suck. Best known are checkboxes that can't be styled. But they're still needed, so they're hidden and overlaid with pseudo elements
by knallfrosch 2y ago
Many original HTML elements suck.
Best known are checkboxes that can't be styled. But they're still needed, so they're hidden and overlaid with pseudo elements. Now you already have the box, :before, :after and the label and :checked special style. Oops. Better also load a whole font to even render the check mark consistently.
The select and option elements are also terrible. So terrible in fact that iOS breaks its own guidelines and instead shows a new page with all options listed. Example: Language selection.
Then there's the developer experience. Can JavaScript stop a selection? Can I hook up an element handler for change? And so on.
I strive to use the "correct" elements, but they do have serious shortcomings.
- floydnoel 2y agoI've often been responsible for telling designers and product management alike "no, we aren't going to style the checkboxes how you like" several times in my career. Interestingly, when deadlines and functionality really matter the "look" of a checkbox isn't that important.
- notpushkin 2y agoPico CSS seems to style checkboxes without pseudo elements: https://picocss.com/docs/forms/checkboxes https://picocss.com/docs/forms/checkboxes (It uses `appearance: none` instead.)
- knallfrosch 2y agoThey use background-image for a :checked checkbox. The image is an inline SVG – clever!