Category Archives: Tutorials

Styling The Select

Styling the Select Dropdown using Javascript and CSS

How to style the Select Dropdown

Much like a frustrated wallflower on Prom night, we’ve decided that we’ve watched from the sidelines for too long now, and have decided to publish our first online tutorial; please be gentle all you veteran tutorial writers!

We’re going to show you a quick and easy way how to style the select dropdown; something that we’ve found difficult to get to grips with in the past. We’re using a script from Christian Heilmann, and kudos must go to his post on ‘Taming the select’ found here.

Why bother styling the select anyway?

Honey, I broke the website:- Select Dropdown examples with & without js / css styling

Select Dropdown Comparisons

You might argue that each browsers default elements are well known to the user and shouldn’t be messed with. That’s a valid point if you can get the select to marry visually with the rest of your site design – or simply just don’t care about the aesthetics. However, this is not so good if the default elements look terrible next to the gorgeous design you’ve spent so many painstaking hours / weeks / months putting together – even worse if you have a client that demands consistent styling across the site.
Continue reading »