Cross-Browser CSS Styled Select Lists Using jQuery

Written by
Published
Typical Read
3 minutes
Find your next web developer job
Drupal Web Developer at On Fire Media (San Antonio, TX)

Front-enders won't be the only ones to rejoice after reading this. I'm going to walk you through how to build a prettyfied cross-browser CSS-styled select lists.

Front-enders won’t be the only ones to rejoice after reading this. I’m going to walk you through how to build a prettyfied cross-browser CSS-styled select lists.

I know for many years web designers have yelled at us front-enders about why we can’t style our site’s select box like the one’s in the mockups they create. With the added rounded corners, customized drop down arrows, gradients, images and more; styling drop down select boxes can become a nightmare for us. Not only is styling them a pain, but different browsers render them differently.

If you’re a pixel perfect coder like I am, I’m sure you share in my frustration trying to make those stupid drop downs look good and the same if the various browsers. Well, hopefully after reading this article you’ll be getting some better sleep at night because I’m going to make styling cross-browser CSS styled select lists using as easy as pie! Ready for some delicious code?

UPDATE (Mar. 18, 2014): Fixed issue where selects would break when more than one appears on the page.

Download Demo Files


Enough with the small talk, let’s get into the code. First we’re going to start off by coding the structure and content of the page.

Step 1: Start with the basics

index.html

Take a look at the markup above. Most of it should be pretty straight forward for the majority of you. There’s one thing that may stick out a little and that’s the use of the data attribute:

  • data-icon, the location of the icon for the specified list element
  • data-html-text, the content that will appear for the list element

Step 2: Build the functionality

script.js

This is where the magic happens. If you’re familiar with jQuery, you should be able to read and understand the markup above. It’s pretty simple and straightforward, nothing too complex.

Basically, we hid the select box and looped through all of the items to generate the rendered HTML content. That content will turn into our styled select box. When someone clicks on the rendered box, the list will slide down with all of the available list items from the hidden select box. Once the user select an item, we update the visible text. Simple stuff!

Now that we’ve got the structure, content and functionality built, we need to make it prettyfied. This is where the power of CSS3 comes in.

Step 3: Make it prettyfied

styles.css

That’s all the styling you’ll need to build this cross-browser CSS styled select list. Of course, you can always embellish it with your own little flair. Just remember to be vigilant about the capabilities of outdated browsers.

The Final Product

CSS3 Styled Select

Browser Support

I made a point to ensure that this method of doing styled select dropdowns would be cross-browser compatible and work with older versions. I’ve testing the code in the following browsers:

  • Google Chrome
  • Firebox
  • Internet Explorer (version 7 and up!)
  • Opera
  • Safari

Let me know if you run into a different browser or a specific version of a browser that this doesn’t work on or comes out a little messed up.


In Conclusion

I’ve demonstrated just one of the many ways to build a cross-browser CSS styled select list using jQuery. I prefer this method because of it’s simplicity and ability to style it however needed. A major bonus is that it’s cross-browser compatible, which many of the styled select box scripts aren’t.

I’d love to see how you’ve incorporated it into your site and any feedback other developers might have.

Did you find Cross-Browser CSS Styled Select Lists Using jQuery useful? Get articles in your inbox.

…and don’t worry, I hate spam as much as you. Expect to hear from me at most once a week.

Share on facebook
Share on twitter
Share on linkedin
Share on reddit
Share on facebook

Stay updated.

Get a weekly email with the latest trends in web development & SEO.

Write a guest post.

Have an interesting article or idea? Become a guest blogger & pitch me your concept today.

Join the conversation.

Your email address will not be published. Required fields are marked *

All comments posted on 'Cross-Browser CSS Styled Select Lists Using jQuery' are held for moderation and only published when on topic and not rude. Get a gold star if you actually read & follow these rules.

You may write comments in Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after.

Want to tell me something privately, like pointing out a typo or stuff like that? Contact Me.