Skip to content

Custom, accessible checkboxes

Usually I tend to vouch for not messing with the browser’s default inputs, for various reasons. Mainly: they’re still a pain to style in a consistent and accessible way across different browsers. But also, you’re introducing new form controls for your users. Ones that they have never seen in their lives. So make sure that whatever styles you add, at least try to keep those controls pretty obvious in order not to confuse your users.

Recently I had to implement a custom-designed checkbox for a client. You can see the result in the following Pen.

See the Pen Custom CSS Checkbox by Nacho Toledo (@iign) on CodePen.

Take into consideration that implementing a custom input requires a lot of attention to details and a lot of testing. How does your input look when disabled? When focused? When checked and disabled? How about on mobile? On screen readers?

Read more

I actually found this post after I had already built this checkbox and wrote this post, but it uses the same technique and is clearly explained.