As part of corporate branding, a lot of times the restyling of the select options is desired.
In terms of implementation and features, selects are probably one of the most complex UI-elements in the browser. We often overlook which features it offers, because often we don't even think about when we use it. But let's quickly list things you might forget:
- Especially smartphones implement often their own select. For example take the select in iOS Safari, it is highly optimized for touch input and offers a completely different way of input.
- It will always render appropriately, which means, you'll always be able to click all the options: If it is on top of the screen, it will render below the cursor, if it is on the bottom, it will render above.
- When you type inside the input-field, the selection will change according to the characters you entered.
- You can use the keyboard to control it.
So why even bother to re-implement it? Users like to use stuff they know how to use. Every user will know how to use a select. The only reason is that you can decide the UX and the look.
I looked at multiple popular websites and asked some other frontend developers about their opinions. Below are some selects of some of the biggest websites in the world.
When you look at the biggest websites in the world, you'll notice selects all over around:
The pictures should make it clear, that even the big players, who can afford to rebuild a select in every programming language ever created, that it's not worth it for things that are just a simple select.
But… there are some custom selects…
After looking myself at how other websites do it and a discussion with other developers, this is the conclusion:
- When you can use a simple select, do it. Accessibility is good, users know how to use it, it works on every platform.
- When it's actually not an option but more of an action (language select vs. edit/delete) use a dropdown.
- When the functionality is super specific (re-fetching data when you type) or the UX hugely benefits from it, use a custom select.
Despite this, here are some nice projects which re-implement select: