Do you know what I hate the most about CSS? Styling form elements.

Yes, most browsers provide some sensible defaults, but clients never seem to want those in their designs. Good luck getting the form to look the same across all browsers. Some even say it’s downright impossible.

Do you know what I loathe about CSS? Styling dropdowns (select elements).

It may be simple to style the select box itself, but what about the options? As far as I know, no browser provides a way to do so.

On a recent client project the designer requested custom styling for both the select box and its options. After throwing a fit for 30 seconds I went to work on finding someone who had been kind enough to do this for me. Eventually I came across Select.js from the wonderful team at HubSpot.

How does it work? Well. I haven’t really looked into the code too much so for now I’ll just say “Magic.” All you have to do to use it is include the proper javascript & CSS files, add 3 lines of JS to your project and you’re good to go! Check out the documentation for all of the details. It’s even easily themeable!

If you’re looking for something geared towards more complex dropdowns, take a look at Chosen from the Harvest team.