Thought I'd take this opportunity to thank you for your work. I came across your site searching for a box-shadow the other day, after spending too long attempting it myself
CSS checkbox examples
11–20 of 64 posts
Re: CSS checkbox examples
#12Thought I'd take this opportunity to thank you for your work. I came across your site searching for a box-shadow the other day, after spending too long attempting it myself
Thanks, merek. Happy it was helpful to you :D
Re: CSS checkbox examples
#13Unfortunately, almost all of them are terrible for accessibility. Most of them cannot be focussed by keyboard. And even more do not have a focus styling. I did not check their code, but that alone does not make a good impression.
Please consider accessibility when you have the urge to build custom (form) components. For checkboxes, have a look at https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/ for some guidelines.
Re: CSS checkbox examples
#14Very difficult to resist going through and checking each and every one of them.
Re: CSS checkbox examples
#15Unfortunately, almost all of them are terrible for accessibility. Most of them cannot be focussed by keyboard. And even more do not have a focus styling. I did not check their code, but that alone does not make a good impression. Please consider accessibility when you have the urge to build custom (form) components. For checkboxes, have a look at https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/ for some guidelines.
Good point. Indeed looks like only a few have. I'll try to add focus styles to all of them in the future. Thanks!
Re: CSS checkbox examples
#16I think the green and red color is a must for all sliders.
It's very hard to tell if it's On or Off when it's a monochrome slider.
Re: CSS checkbox examples
#17I think the green and red color is a must for all sliders. It's very hard to tell if it's On or Off when it's a monochrome slider.
And green/red is not so great for the most common type of colour blindness: https://www.nei.nih.gov/learn-about-eye-health/eye-condition...
Re: CSS checkbox examples
#18The pill boxes are awful. I never know if it means that it's on or off.
Re: CSS checkbox examples
#19Unfortunately, almost all of them are terrible for accessibility. Most of them cannot be focussed by keyboard. And even more do not have a focus styling. I did not check their code, but that alone does not make a good impression. Please consider accessibility when you have the urge to build custom (form) components. For checkboxes, have a look at https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/ for some guidelines.
[deleted]
Re: CSS checkbox examples
#20The only clear and no margin for confusion is the one with "X" vs "check" inside the circle. If that "X" would be red and the check green that would add even more clarification. I hate UI's where I have to click everything first in order to understand what's what, I prefer intuitive design instead.