CSS styling for drop-down list – cross-browser, CSS only

Drop-down list are really difficult to style cross-browser. Designer always make some pretty drop-down list but the rendering of the style is very different from a browser to an other. And then everyone ask why it doesn’t look as the design, well, hum…

I have been looking for a nice CSS for ages. It nearly impossible to make it work the same in all browser. I had a play a long time, but Firefox and Safari are different, then IE gets weird on some devices, joy! And it is even more crazy with mobile browsers.

The big problem stay IE, as usual, but here is a script for the rest of them, yey!

Dropdown list css style

Demo page – CSS Sources

Dropdown list css style tested in different browsers

Don’t change it too much, it may not be what you exactly need, but that’s a nice one, well done and thanks to @toddparker

Full link – https://github.com/filamentgroup/select-css

If you need something more complex, have a look at Chosen, a jQuery plugin that makes long, unwieldy select boxes much more user-friendly

Notify of

Inline Feedbacks
View all comments