This post is going to be sweet and short, as i don’t have much time to write it. However what I want to talk about is styling select items, we all know its hard and most of the time a complete pain because it usually doesn’t work cross browser / cross platform. A while ago I stumbled across a site, which not only styled the select option, it also did it pretty well without having to add any extra bits of HTML, it looked as though it did it all through jQuery / javascript. So I thought it can’t be that hard to produce the same. What im going to link you to is a jQuery plugin developed by myself and another developer, which allows you to style selection boxes with a simple jQuery plugin. I will give a simple run through of how to do it but its really simple so I can’t see you struggling.

Github download

Download me - first off download  the code, its on github so if you want to fork it go ahead.

What you get

  • index.html
  • select-item.png
  • jquery-aselect.css
  • jquery-aselect.js

This is all you need, the select-item.png is a sprite so you have all states there, i.e. inactive, active, hover ect.

So how does it work

Its as simple as calling the jQuery plugin, CSS and jQuery onto the page you wish it to work on, using:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<link href=”jquery-aselect.css” rel=”stylesheet” />
<script src=”jquery-aselect.js”></script>

Now all you need to do is call the plugin:

<script>$(function (){$('select.fancy').aselect({width:'200px'});});</script>

As you can see the function will only run on select items with a class of  ”.fancy” the aselect also sets the width of the select item, so have no fear in making as wide or as short as possible.

What does it show

The select item will now show the first item in the option list with a specific styling, if you want to change the styling of the item, please edit the select-item.png, this is the key behind it all.

What browser does it work in?

All, well I say all. What I really mean is all good modern browsers, so it will work on IE7+, web-kit browsers and moz browsers.

Is it worth it?

It depends what you are after, as a web design usually you will find that the client will want a specific style to their site, adding this in the original PSD’s and then being able to offer it in a functional form, however users usually look for OS related drop down items, as these are common place. You have to take it with a pinch of salt, people will still understand its a select item, they just might take their time to do so. Also unlike many other drop down stylers that are currently out this is very light weight and wont slow down the page to much. It also works like a normal option on iphone.