jQuery plugin: Stylish Select Box – Unobtrusive select box replacement
I have released a new jQuery plugin that allows you to style the standard <select> form element with CSS so that it looks the same in all major browsers.
Checkout the latest source on GitHub
Download latest source code (version 0.4)
The plugin is available to download from the jQuery website.
Tested and works with:
Firefox 3.0, Firefox2.0, Chrome 3, Safari 4, IE8, IE7, IE6
Why?
Because sometimes the browser default form styles look ugly with the rest of your site and <select> elements are notoriously difficult to style with CSS. You can see how wildly different <select> elements can look in different browsers with the same CSS applied here.
The IE6 issue(s)
IE6 has a nasty habit of always displaying <select> elements on top of any other content, regardless of any z-index. This can be very annoying when using JavaScript overlays, drop down navigation etc. The only way around this issue is to use the iframe shim technique which places an iframe around the content that needs to appear above the <select>.
Then there’s that other issue of not being able to set a width on <select> elements without clipping off any options wider than the set width.
While workarounds do exist for these issues, I wanted to create a drop down menu that worked exactly the same in every browser and did away with these IE6 oddities.
So how does it work?
Stylish Select basically grabs all of the options from your select menu, puts them into an unordered list and hides the original <select>. This unordered list is then made interactive, so that it functions like a browser native <select>. When you click on or navigate through the list with the keyboard, it updates the <select> in the background, so that when you submit your form, it is just like you were using the original <select>.
This newly created <select> now has the flexibility to be styled in whatever way you choose.
Alot of work has been done to make the newly created <select> to function like the original browser default. The plugin offers the following features:
Supports keyboard navigation including alpha-numerical keys
If the <select> is at the bottom of the screen, the drop down menu stays on the screen
Support for grouped options with <optgroup>
If a value is selected, the new select menu shows this option as selected
You can invoke the plugin on any <optgroup> with the following method:
$(‘.my-dropdown’).sSelect();
@Jarno:
jQuery 1.4 no longer allows setting .val() by the .text() of the option element. While I agree with their reasoning, it does break this (and other plugins). I’ve created a build of Stylish Select using jQuery’s .data() to store the option values for use with .val(), which can be downloaded at:
http://www.harvest.org/JustinB/jquery.stylish-select-0.3.r1.zip
My testing has shown that this works well with minimal overhead. I’ve made a couple other tweaks for my needs–most notably making resetSS() pull the original options object, fixing the scrollTop of lists with default values, and removing the hard-coded 3px gap to allow setting it via CSS. You can find full changes by running a DIFF of my sources against his 0.3 source linked from this page.
I hope this helps anyone who needs 1.4 compatibility in the short term, and maybe it’ll give the author some ideas on update his “official” version.
Please post any bugs you find; thanks!
@Jarno:
Just a note; your fix breaks support for optgroup tags. I implemented my fix using jQuery’s .data() and storing the value with each element in the new list.
My implementation is here if you want to take a look:
http://www.harvest.org/JustinB/jquery.stylish-select-0.3.r1.zip
I haven’t gotten through much testing, so I’d love to hear any feedback anyone has.
@Jarno, @JUSTIN, @sko77sun
Seems that stylish-select has overgrown the simple plugin file, that can be simply published on a web-site. I think it needs some CVS support and ticketing-system. Meanwile, there are many patches from different authors that can be accumulated into single maintainable open-source product.
Colleagues, what do you think?
@Artazor:
I agree; it’d be great for this project to be up on a public repository. That way we could contribute when things like this jQuery release happen, and the author can serve as a moderator of sorts and still control the direction of the plugin and push out tags from user contributions.
I think that this plugin simplifies such a difficult task that it would eventually make a really great addition to jQuery UI as well.
I can definitely say from my perspective that not having this up in a source control system has made upgrades pretty painful for me, as I have a separate fork of the source with customizations specific to my organization that aren’t mainstream enough for most users’ needs. There might be many more users looking for this, but who don’t have the implementation knowledge to tweak it to their needs.
I’d like to hear Scott’s thoughts as well.
The Stylish Select project is now hosted on GitHub, so you can all contribute to the project! I hope this will strengthen the project as I do now always have enough time to work on this as much as is required. The public repo is at: http://github.com/sko77sun/Stylish-Select
Thanks for all your contributions, I have merged some of them into this latest version (now 0.4) which is jquery 1.4 compatible. I rewritten parts of the plugin, most notably the scrolling, this is now handled by setting focus on the list element so there is no need to do any calculations for this.
I welcome any comments or suggestions for the plugin, something I want to work on next is support for select type=”multiple”. See you on GitHub!
Hey, this is a great plugin. But I have one weird issue. When I view this page in ie7, when the selects drop down, they over lap the select below them. Seems to work fine in every other browser. Any ideas? http://www.nourichemedspa.com/wordpress/about-nouriche/meet-dr-cobb
Hi, select ul goes under my cufonized text
I mean, I have some text on wich I apply Cufon tu replace it, and my goes under that text (just in IE6 and IE7) anyone had this issue before? thanks
ok, I typed something unallowed
I wanted to say that my newly created select box goes under the cufonized text, sorry for double-comment.
[...] jQuery plugin stylish select box – Unobtrusive select box replacement – Link. [...]
hellooooo somebody there? I’m the only one facing the cufonized text issue ?