Download me - first off download the code, its on github so if you want to fork it go ahead.
What you get
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:
<link href=”jquery-aselect.css” rel=”stylesheet” />
Now all you need to do is call the plugin:
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.
Tags:CSS, githib, HTML, jquery, select item
Leave a Reply
You must be logged in to post a comment.