jQuery UI Selectmenu: An ARIA-Accessible Plugin for Styling a Custom HTML Select Element

Posted by Scott Jehl 06/19/2009

April 2020 note: Hi! Just a quick note to say that this post is pretty old, and might contain outdated advice or links. We're keeping it online, but recommend that you check newer posts to see if there's a better approach.

Update: For those interested in using this plugin: we now recommend that you download the source from Felix Nagel’s revisions of our plugin, as he’s made many improvements since we first published it. You can find Felix’s branch on Github here: http://github.com/fnagel/jquery-ui. To download a zip, look for the silver “Downloads” button near the top right of the page.

We recently contributed a number of our own plugins to the jQuery UI labs repository, a new branch of the jQuery UI project dedicated to future plugin development. Our latest contribution to labs is the selectmenu plugin, which is designed to duplicate and extend the functionality of a native HTML select element, and lets you customize the look and feel, add icons, and create hierarchy within the options. Best of all, it’s built with progressive enhancement and accessibility in mind, has all the native mouse and keyboard controls, and is ThemeRoller-ready.

What does it do?

Permalink to 'What does it do?'

HTML select elements, like many other form elements, are nearly impossible to style and customize across browsers. This jQuery UI widget provides an accessible, styleable, and configurable replacement for select elements, allowing you to customize their behavior and appearance for a richer user experience. The plugin uses progressive enhancement to pull the content and state information from the select before replacing it in the page. After replacing the select element, the selectmenu continues to act as a proxy to the select that it replaced (even though it is hidden from the user), so when the form is submitted, the select value is still there to pass data to the server.

Features

Permalink to 'Features'

Although this plugin is still in development, we’ve already implemented enough features to make it useful in real-world projects. Some of the features currently supported are:

Keyboard accessibility The keyboard events match the native select implementation of popular browsers, including support for arrow keys, enter, space, tab, home, end, page up, and page down. The menu is keyboard accessible while closed as well!
ARIA support ARIA attributes are added to the component, making this plugin an accessible replacement for a native select element (for users with modern screen readers).
Different menu types Popup or dropdown
jQuery UI Widget-factory-driven Built using the standard jQuery UI widget pattern for creating widget instances.
ThemeRoller-Ready Full theming support using jQuery UI ThemeRoller
Form label association If there’s an associated form label on the page, clicking it will focus the selectmenu widget, and its “for” attribute will properly associate with the selectmenu widget for accessibility purposes.
Option Text Formatting The format option allows you to customize the text of every option, creating complex formatting not possible in native select elements.
Optgroup support select elements with optgroups are translated into embedded HTML lists with a content-text label matching the optgroup’s label.
Disabled attributes on the select element will disable the new component as well.
Quick Type-ahead Like a native select menu, you can quickly access options by typing their first letter. Repeating a letter will iterate through the options beginning with that letter.
Callback events The selectmenu plugin provides callbacks for open, close, select, and change events, allowing you to execute scripting based on those events. The change event even triggers a change event on the original select element, allowing you to reliably track form change events.
Many more updates are included in Felix Nagel’s forked copy of this plugin. See download options below for info

Options and Configuration

Permalink to 'Options and Configuration'

The following options are available in this widget:

transferClasses: true, transfer classes from select
style: ‘popup’, also available: ‘dropdown’
width: null, defaults to select width, accepts a number
menuWidth: null, sets menu body separately. accepts a number
handleWidth: 26, width that the icon arrow block will hang off the edge in a ‘popup’ style menu
maxHeight: null, the maximum height of the menu (with support for scrolling overflow).
icons: null, an array of objects with “find” and “icon” properties. “find” is a jQuery selector, “icon” is a jQuery UI framework icon class (“ui-icon-script”). This allows you to append span elements to options for use as icons.
format: null, Accepts a function with a single argument that can be manipulated and returned with any level of manipulation you’d like

Usage

Permalink to 'Usage'

Using the plugin is as simple as addressing a select element on your page and calling “selectmenu()” method on it. Like this:

$('select').selectmenu();

Beyond that, you can utilize the options mentioned above using the same conventions followed by all other jQuery UI plugins.

Grab the code!

Permalink to 'Grab the code!'

All blog posts