A CodePen by Craig Morey. uSwitch pure CSS select control v1.0 - An elegant pure CSS styled scalable select box with minimal extra HTML, for cross browser/platform use. No JS, no external images, just one stylesheet.

*** SELECT BOXES ARE A BUGGER ***

Leave all concepts of "W3C standard" behind, select boxes are a strange mix of inconsistent CSS support, OS control design and browser quirks. Either you decide to stick with the standard select control in each platform, or you need to be prepared to start making compromises.

There are valid arguments against styling input controls like <select>. It can give users an inconsistent experience, controls that they don't immediately recognise, and buggy behavior. That's all true, but I'd say only if you design or build it badly. 

And standard select controls? Some are just plain butt ugly. Most vary between different browsers on the same platform. Almost all seem to be a random size in comparison with other input controls, with different font-sizes to boot. Some don't even have basic uablility chrome such as "focus" or "hover". Ugh.

You could go the JS route and use a full "doppleganger" solution like Chosen.js. This uses Javascript to clone a copy of the select menu, but built out of easily style-able DOM elements like spans and ul. It makes awesome looking menus. But it relies on being initialised for each select menu as it appears (not great for XHR called UI), interferes with attached events in other scripts and builds a mighty weight of extra DOM (a 1500 option list can slow down a page pretty quickly). Plus they often suck on any platform other than desktop as their "faked" UI conflicts with touch input or small screen use.

You could go the HTML route and add wrappers to your select elements, then use overflow hidden to hide the drop arrow, giving you free reign to style as you please. But you need to have enough control of your content to specify the exact width of your select boxes to set the wrapper width.

We didn't want any javascript and minimal extra html. We wanted to use only CSS where possible, with minimal HTTP calls and no external images. We wanted the select box to act like a native control everywhere, without faking anything. To not get in the way of javascript events. To work instantly if a select box is in the page, even if pulled in via XHR after the page has loaded. To scale in size with no extra effort, and not be reliant on any pre-defined fixed sizes. It's got to look good, to be un-mistakable in it's purpose. It's got to be retina ready and work on mobile but still usable on the oldest browsers. And for us, we needed ot to match the size and style of our existing UI elements.

It's taken literally months of tinkering, but this is the uSwitch select control.

Yeah, CSS hacks - like I said, you've got to make compromises somewhere. Some of the IE CSS hacks could be done better with conditional comments, but this was meant as a single stylesheet solution. Feel free to implement your own way.