DEV Community


UI Snippets: Say NO to Ugly Check-boxes!

worldclassdev profile image Philip Obosi Updated on ・1 min read

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:

Connect with me on twitter will you? @worldclassdev


Discussion (4)

equinusocio profile image
Mattia Astorino

Stop doing this. Accessibility is important and if you want to create a new “not-ugly” html element, make a web component

worldclassdev profile image
Philip Obosi Author

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.

equinusocio profile image
Mattia Astorino • Edited

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. 🖖🏻

Thread Thread
worldclassdev profile image
Philip Obosi Author

I agree. Would you do that and put a link below? Everyone would very much appreciate that.

Forem Open with the Forem app