10 Solutions to style Form Selects with jQuery and CSS

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.

1. Simple Drop Down Effects

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.

2. Custom Drop Down List Styling

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.

3. Select Inspiration

One final collection of amazing select element solutions from codrops.

4. jQuery Selectric

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.