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.

With this particular example, the select has optgroup elements to organize the option elements. The selectmenu renders these accordingly. What I don't like, is the font weight on the item when hovered or focussed. It's bold, and looks too similar to the group labels for my taste. Now, this is a symptom of the ui-state-focus class — not the widget itself. This is an easy fix however. The following CSS overrides the font-weight property for the ui-state-focus class, but does so only in the context of this widget.

.ui-selectmenu-menu li.ui-state-focus {
    font-weight: normal;
}

The result looks something like the following. This also fixes, I've noticed, some jerky positioning behaviour when moving the mouse cursor around.