I had, for quite some time wondered how to go about styling a select box, as we are aware, they are Inherently troublesome to style, there’s many threads on Stackoverflow posing this very question.
About 6 months ago I had the idea of wrapping the select-box in a container, making the select box about 60px wider than this container, and setting the containers style to be overflow hidden in order to hide the arrow however this had issues in some browsers, especially iOS.
There are solutions such as this one provided by Twitter Bootstrap. However this isn’t using a select-box at all, it’s merely an unordered list styled to look like a select-box and as such can be styled further in any way you choose. However, there is a downside to this solution: You loose the native select-box UI on mobile and tablet. That can’t be a great experience for users on those devices who are used to seeing their native UI, I’d put money on this slightly damaging the conversion rate for users from these devices.
We need some way to style a select-box — properly. Something that works cross browser and doesn’t hinder the native UI of the touch devices.
Then this thought crossed my mind: What if we were to set the opacity of the select-box to zero, then style a label underneath to look like the select-box we intend. I was pessimistic as I assumed that the select-box would remain transparent even once open. But I was wrong, the container itself remains transparent but the options are visible.
The label should come first to ensure the select box is layered at the top.
##And the result