• Skip to main content
  • Skip to footer

Aaron Eaton

  • About Me

aaron

Finally. An easy way to style dropdowns (select elements)

May 20, 2015 by aaron Leave a Comment

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.

  • « Go to Previous Page
  • Go to page 1
  • Interim pages omitted …
  • Go to page 8
  • Go to page 9
  • Go to page 10

Footer

Archives

  • April 2021
  • October 2020
  • September 2020
  • May 2019
  • December 2017
  • November 2017
  • January 2017
  • September 2016
  • June 2015
  • May 2015

Categories

  • Development
  • Gardening
  • Personal
  • Woodworking

Copyright © 2021 · Atmosphere Pro on Genesis Framework · WordPress · Log in