The select tag in HTML has been getting a lot of over-due code love. Perhaps all of this attention comes from being a vital tag used in so many forms but natively lacks flexibility and consistency across browsers. Whatever the reason – there are now a myriad of tools available to help make select boxes work and look the way you want them to. Here are a few resources that stand out from the crowd when it comes to working with those select tags.
jQuery UI Selectmenu
Built on jQuery UI this plugin converts your select elements into pure eye candy. The select tags are replaced in the DOM with more cross browser friendly tags and the result is theme based elements for your forms which provide the basic operations of a select tag as well as icon inclusion, multi-line support, max-height (with scrollbar thereafter), and the option to drop down or pop up as well as optgroups.
Key presses are partially supported. Tab and escape Key work. Up and down arrow keys do not. You can download selectmenu from github.
jQuery SelectBox Plugin
The jQuery SelectBox Plugin offers a solid base with lots of native support. As the name suggests this plugin is specific to the select boxes. This plugin also replicates the select object in the DOM with alternative tags which open the doors to greater styling and consistency across browsers. A few of the key strengths about this plugin are the key press supports including esc, tab and arrow keys.
The plugin comes with one default look and feel. There is no theme selection. Customization would require the modification of the included CSS file.
There are no themes provided other than the default, but the CSS is readily available for custom styling. You can download this plugin from gtihub.
We featured dropkick.js on July 6 in our post Kick Your Dropdowns Up a Notch with ‘DropKick’. As we are reviewing the best options out there for managing select tags we would be remiss if we failed to include dropkick.js. As with the other plugins dropkick replaces the select tag with more flexible code and provides a themed approach for excellent out of the box support.
Chosen is another plugin we featured recently and feel it should be listed here as we cover the general scope of tools available to work with select tags. The feature that stands out about Chosen is the way it handles the multi-select drop downs. The result is a smooth system that feels more like an ajax controlled tagging system. It really brings the intuitiveness that a default multi-select box lacks.