Okay!!! I'm not exactly a front-end guru but it really just doesn't sit right with me when i visit certain websites and find poorly designed check-boxes being used on them. Trust me it hurts even more when the checkbox still holds its default look.
Disclaimer: Please note that this project is just a showcase of how we can improve the aethetics of checkboxes. It doesn't claim to abide by the best practices and principles of acessibility. Just a CSS Stunt!
So i did a little Codepen to start the war against ugly check-boxes. Take a look and let me know what you think about it in the comment section.
Do well to share your own beautifully designed checkboxes too. We all could learn a thing or two.
Codepen URL: https://codepen.io/worldclassdev/full/xJmrax/
Connect with me on twitter will you? @worldclassdev
Gracias!
Top comments (4)
Stop doing this. Accessibility is important and if you want to create a new “not-ugly” html element, make a web component
Hey Mattia.. Your perspective is understood and very much appreciated. However, the focus here is on aesthetics and good CSS. Perhaps you could do something as aesthetically pleasing as a web component and share with us? We'd love to learn from you.
The point is that you can build a new html element (like the switch toggle) with his a11y behavior and basic style like others built-in html elements. Then users can customise it like every other element with css.
Remember that in a community, a key point is to teach other people that may have a jr experience, so adding a visible disclaimer “just for fun” or “not for production” can be enough. 🖖🏻
I agree. Would you do that and put a link below? Everyone would very much appreciate that.