While it is possible to use CSS to style SELECT elements, browser support and appearance will vary greatly depending on platform and browser. In our search for a solid, customizable replacement for these finicky controls, we turned up only a handful of possible options that we ultimately weren’t thrilled with for one reason or another. Thus, today we’re introducing a new jQuery plugin that replaces standard SELECT elements so you can customize them entirely using CSS. We even threw in some extra features for added usability.
The plugin works by piggy-backing your existing SELECT controls. Since the original controls aren’t destroyed (they’re hidden), you can easily integrate this plugin into just about any existing form. The plugin degrades gracefully, as users without JavaScript will see the default SELECT controls.
Plugin Features
- Easily replace existing SELECT controls
- Supports OPTGROUPs
- Supports standard dropdown controls
- Supports multi-select controls (i.e. multiple=”multiple”)
- Supports inline controls (i.e. size=”5″)
- Fully accessible via keyboard
- Shift + click (or shift + enter) to select a range of options in multi-select controls
- Type to search when the control has focus
- Auto-height based on the size attribute (to use, omit the height property in your CSS!)
- Tested in IE7-9, Firefox 3-4, recent webkit browsers, and Opera.
Please refer to the main source file for implementation examples, a list of known issues, and the change log.
Demo & Download
This project is actively maintained on GitHub. Please submit all issues and contributions to the project page. Licensed under both the MIT and the GNU GPL licenses.
Hi, this is great. Congratulations! However, I’m seeing weird behaviors in IE. When I click on a select box, IE (the browser itself) looses focus and goes to the background. Let’s say I have Photoshop open and IE, when I click on a select box, Photoshop comes forward. Do you have any idea why this is happening?
Ruben, thanks for finding that bug. The issue is fixed in the 1.0.1 release. I’ve also fixed a minor Webkit issue, added a check for iOS devices, and reworked the ‘options’ method so it doesn’t destroy/recreate the control.
This is just exactly what I’ve been looking out for. Thank you so much Cory! :)
Hi Cory. I wonder if that iOS check can be updated for Android?
Great work, thanks!
Hi Cory! Thanks for your efforts!
Will you also publish the instructions on how to use the plugin? With all the options, callbacks, etc
I don’t have an Android device to test on, but I’m pretty sure you can just check the user agent string for “ANDROID”. Anyone want to give it a shot and send me the results?
Konstantin, please check out the comments in jquery.selectBox.js and the source of the demo page until I can get everything posted to the site.
How do I change the width of the select box? After applying this plugin they are all the same width.
Great plugin, thanks! One question: can the width be set so that whatever is in the select box determines the width, like a normal select? Thanks.
The width has to be controlled using CSS. The former version had an autoWidth feature but it was dirty since it had to draw a dummy control off-screen, measure it, and remove it. CSS is a cleaner solution because you can set min-width, max-width, or a fixed width in your stylesheet. Alternatively, you can use an inline style on the original <select> element.
Cory, thanks for replying! I already found the comments and installed the plugin :)
A request, if I may: users of select element are used to start typing the word to search in the long list. Your plugin implements this standard functionality, but only partially. One can type a sequence of letters to scroll to a specific word. But can not type for instance “a” several times to scroll down step by step through all items, which begin with “a”. Your plugin treats this as a sequence “aaa”.
Can you add this to your plugin please?
That is great. Thank you for the fix.
Nice work once again.
Konstantin, that’s a good point. I’ll have to evaluate each browser to see how this behavior works more in-depth. For example, what happens if you type A-A-A and there happens to be an option that starts with “AAA”? I’ll try to work it into the next update.
Cory,
I have patched the plugin on my site (www.huiskompas.nl, click on Plaats) , in a “quick and dirty” way. There is still a difference in behavior with the standard select box: in select if you keep “a” key pressed it will loop through the options. In my patch it stops at the bottom. Also in select if you press “a” several times sequentially, it will move 1 item down no matter how much delay there is between key pressings. In the patch if you delay next “a” with >1sec it will move back to the 1st element. So its not perfect.
I trust you can fix it better, to completely emulate the select box standard behavior.
To answer your question: lets imagine that you have an item “Aab”. In standard select if you press “aa” then at first it treats it as 2x scroll down (not selecting the item), but as soon as you hit “b” it jumps to the item.
Hope to see updated plugin soon :)
Hi Cory, looks great. I will give it a try. I was wondering in my app, I need to dynamically set the attribute multiple and revert back to single according to user clicks. How would you do this?
Gilles, you’ll probably need to destroy and recreate the control. There isn’t a mechanism for switching between inline and dropdown controls.
Works fine on any browser except IE 8.
Listbox will be placed on the top of the browser and not under the dropdown.
Any idea what the reason could be? (I use the latest version).
Eridle, does it happen on the demo? If not send me a minimal test case or a link.
Great plugin.
What about a form reset? This seems to break regular reset functionality.
Ben, good call. I’ll need to add an update method that you can trigger after a form reset since the plugin can’t detect this on its own.
Looks great, especially the ability to wrap long option values. Is there any way to be able to select the option group label itself?
Hello. Is it possible to add images in the select control’s options? You can see an example here: http://wiki.jqueryui.com/w/page/12138056/Selectmenu
I’ve had problems with this in firefox 3.6.13 and another 3.6.x install. This is not definitive and probably my fault, but I’ve incorporated it into a greasemonkey plugin and it works in FF4, but seems to have issues with shift-click on earlier versions. I kind of doubt it’s your plugin’s fault, but just stating that it I ran into some difficulties.
I’ve used the plugin for the Tour 2011 section for http://www.manutd.com. However, on Android devices the scroll is not working. Any idea how can I make it work?
Nice Plugin!
A Little idea, append the ul.selectBox-dropdown-menu not in , insert ul.selectBox-dropdown-menu after a.selectBox-dropdown. Its better for individual style the ul.selectBox-dropdown-menu.
Beautiful plugin. Really liked it.
However, the only feature that I’m missing is that it ignores the ‘empty’ option of the the original ”.
Thus, after a value is set, it CANNOT be reset back to ‘empty’.
Added this as an issue on GitHub. Will fix for next update.
Catalin, you’ll need to add a check for Android devices to disable the control. (There’s already one in there for iOS.) I’ll also add this as an issue on GitHub, but I don’t have a Droid to test on.
Sermat, not inline, but you can set classes for each option and add images using CSS. I’m actually doing this for an implementation and it looks and works fantastically.
Howard, in the same way that normal controls work, there is no way to select an option group itself. They don’t have values, and are only used to categorize groups of options.
I would love to see a checkbox and radio button replacement to compliment this awesome plugin!
I’ve got the script working but can’t figure out how to accomplish two simple things (and wonder if maybe they can’t be accomplished with this script?):
1) Upon page refresh, is it possible for the script to reset itself and display once again it’s “selected=selected” option?
2) Is it possible to turn the select box into a jump menu (without a GO button)? I’ve tried numerous approaches, and none have worked.
Thanks!
I’m still having the problem of IE7 losing focus when the control is clicked, but only intermittently and only on two machines I’ve seen.
I’m curious what was causing it the first time, as I’ve got some JavaScript chops and am highly motivated to track it down.
Bob, I need to add a refresh method that can be called manually.
Joby, I’m pretty sure it’s a browser issue, but if you find a workaround let me know!
Bob, for #2 just use the change event on the original select control.
Great plugin! Just what I was looking for, but when I use it the UL generated does not appear in the correct area of the DOM, it appears outside the form itself, and outside a couple of DIVs right at the bottom of the page in chrome, any idea as to why this is?
Is there any way to update the dropdown dynamically? I’m updating the SELECT element with new options via AJAX and then calling $(‘select’).selectBox() again, but then when I click on the dropdown I get the error: “Error: settings is undefined”
Never mind… I downloaded the uncompressed version and I see there are methods in there for this. I’m sure I’ll work it out. :) This is a pretty darn nice extension. Great work!
Hello Cory, I’ve used your plugin twice now and I’ve found it generally easier to use than others. I have a problem where inserting html via ajax breaks the plugin. I ajax load a page with a selectbox, do a destroy, and instantiate them again. It works once, but afterwards, the js debug points to line 487 saying “settings is undefined” and I can no longer drop down. Any ideas?
Nvm. I made some stricter checking rather than globally destroying all ‘select’ then reinitializing them globally again, I specifically destroy them when they leave and come again. I would think the $(‘select’).selectBox(‘destroy’); would get rid of them all and then $(‘select’).selectBox(); would put back all the ones that exist still.
Carwyn, the dropdown portion of the control gets created/removed dynamically, and it appears right before the closing BODY tag so it can be positioned easily (absolute positioning inside of some containers is hit or miss, and I found this to be much easier). However, the main anchor itself appears immediately after the original SELECT element.
Dustin, I badly need to remove the ‘options’ method and replace it with a ‘refresh’ method that can be called after the original SELECT is updated. This is how the prototype selectmenu for jQuery UI works, and I agree that it’s a better approach. I made a note on GitHub to do this.
Wes, I think the ‘refresh’ method would solve the problem you’re having as well. In the meantime, I would suggest limited which ones you destroy and re-create to only the affected controls.
Is there a way to combine this plugin with jScrollPane or find some other alternative to style the scroll bar inside the select box when there are too many options?
Hi there, thanks for the great plugin. I had just one issue where I wanted to use the selectBox in one place with a different style to my default selectBox styles. I couldn’t see a way to assign the drop down menu a class of its own so I hacked away at the script to get it to inherit the classes of the original select box.
Thanks again!
Hey Cory,
Is it possible to have a callback when the select box is focused when initialising the plugin? I’m currently just binding when it’s focused like so: http://d.pr/3J6I
Thx for this great Plugin, but I would be also really happy for an update/refresh method :)
I changed the real select field and then I tried to destroy and reinit the selectBox directly after that, but this did’t work. :(
Is there any workaround so far for that?
Hello there, this plugin is awesome. However, there is a mess in FF 2.0 (Win).
How can I have my Select boxes degrade gracegfully in FF 2.0?
Tried to cut and paste the demo and combine with GitHub…
If you cut and paste from the demo page and attempt to use this code in conjunction with the code on Github, beware – the file/path names used in the html head section demo example use the form “selectbox.js”, whereas the ones on github take the form of “selectBox.js” – i.e. with a capitalized “B”.
Hopefully this will prevent hair pulling of the type I just experienced. By the way, this is tasty-looking, nicely-though-out code – don’t be distracted/put off by this minor issue.
Ben, nope, you’d have to add it in there yourself I think. Shouldn’t be too hard.
Vinod, I don’t have a FF2 test box, but since 6 is out and 7 is due in another six weeks, I don’t think I’m going to go out of my way to set one up.