If you code much with jQuery and CSS then you know what a pain trying to style form selects are. It’s a pain because, it’s not really possible with pure CSS. The browsers generate the select drop-down and for some reason we still can’t target them. Luckily there are some great jQuery and CSS plugin solutions to style your form selects. Here are 10 great options (in no special order) to style your form selects.
Lets start with a great post from codrops. In their words “The idea is to transform a normal select input into something more appealing with a jQuery plugin. The expanding of the options will happen with a transition and parameters can be configured in a way to achieve unique effects.” And we couldn’t agree more, the results are super impressive. 6 awesome demos with different transitions are shown and to our surprise those actually work (good enough) in IE9 which gives this plugin complete approval to use in our opinion.
An oldie but goodie, this is the original post and code that inspired the #1 on this list from codrops. More awesome styles with free download.
One final collection of amazing select element solutions from codrops.
Selectric is one of the easiest plugins to hook up to your existing form selects. Multiple themes are available and the website has an easy to use theme creator so you can make custom CSS to match your selects to your website colors.
A custom select for @twitter Bootstrap using button dropdown.
This jQuery plugin allows you to create a custom drop down that can include images, a short description, along with your usual text and value.
Custom select box replacement inspired by jQuery UI source
Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly.
Multiple selection combobox built for bootstrap themes.
SelectBoxIt allows you to replace ugly and hard to use HTML select boxes with gorgeous and feature rich drop downs.