Selectmenu Items Hover State
Forcing the hover state style for selectmenu items to use a normal font-weight.
HTML
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/cupertino/jquery-ui.css">
<select name="files" id="files">
<optgroup label="Scripts">
<option value="jquery">jQuery.js</option>
<option value="jqueryui">ui.jQuery.js</option>
</optgroup>
<optgroup label="Other files">
<option value="somefile">Some unknown file</option>
<option value="someotherfile">Some other file with a very long option text</option>
</optgroup>
</select>
CSS
body {
margin: 2em;
font-size: 0.7em;
}
.ui-selectmenu-menu li.ui-state-focus {
font-weight: normal;
}
JavaScript
$(function() {
$( '#files' ).selectmenu({
focus: function(e) {
console.log('Focus!');
console.log(e.currentTarget);
},
select: function(e) { alert('Test!'); }
});
});