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 UX, web development, and productivity tips via e-mail.
Comments
If you want to comment, write a post on social media and @mention me or write to me directly on the contact page.