CSS-only custom-styled select, checkbox, radio example (without JavaScript)

Whenever possible, I try to use native HTML elements to take full advantage of the built-in accessibility and usability benefits that come with them. Such benefits are sometimes hard to replicate manually in JavaScript, or can be easily forgotten (screen reader compatibility, proper keyboard navigation, all possible states like focus, active etc.).

Even though the default styling of native form controls is limited and not consistent across all browsers, we can still achieve interesting and consistent (to some extent) results with pure CSS (without JavaScript).

There are also not so obvious cases like native way to implement search functionality for input element (feature that is often implemented in custom-made select replacements).

We’ve all wondered once how to style native form controls. Below I present an example that I used for many years to implement many custom designs for most common form controls (select, radio, checkbox).

Live demo

Further reading

Share

Thanks for reading. If you liked it, consider sharing it with friends via:

Let's be in touch!

Don't miss other useful posts. Level up your skills with useful UX, web development, and productivity tips via e-mail.

I want to be up to date via email!

No spam ever (I don't like spam, I don't send spam). You can unsubscribe at any time. Privacy Policy

Don't you want to subscribe via e-mail?

See other ways to keep in touch.

Comments

If you want to comment, write a post on social media and @mention me. You can also write to me directly on the contact page.