jQuery UI: Selectmenu Placeholder Text

Input elements have a placeholder attribute, which does a decent job at telling the user exactly what's expected. What I really like about using this attribute is that there's no additional space required — it appears inside the widget, when there's no text. Hence the name. So, I tried to do something similar with the jQuery UI selectmenu widget.

Selectmenu Item Hover State

The selectmenu widget is a nice way to augment the native HTML select element. If for no other reason, the theme support. If you're already using other jQuery UI widgets on your page, using the selectmenu widget is an easy way to align the look and feel of select elements, with everything else. Something I've noticed, however, is the hover state for the menu items isn't ideal for all themes. For example, using cupertino, I get something that looks like this.

Selectmenu Test Drive

I took the jQuery UI selectmenu widget for a test drive today, and it's looking good. The widget itself isn't much more than a means to tie select elements into the theme framework, which is important in many circumstances. For example, this widget negates the need for programmers having to base a menu widget on select elements. Instead, the selectmenu uses a menu widget internally, utilizing the parts it needs. The user interaction is nice as well — all keyboard actions work as expected. There is a nice demo showing how to extend the rendering capabilities of the select menu, showing an icon for each item.