To increase visibility of the problem, I've changed border colour to Red for both focus and hover on the Showcase. Notice that the button border has the correct border colour, but on the selectOneMenu only the inner border of the trigger button is coloured.
The reason is that the focus and hover style classes are applied to the trigger button and the label element only, but not to the <div> element enclosing the entire widget.
Code: Select all
<div class="ui-selectonemenu ui-widget ui-state-default ui-corner-all ui-helper-clearfix" id="j_idt44:j_idt61"
style="width: 165px;">
<div class="ui-helper-hidden"><select name="j_idt44:j_idt61_input" id="j_idt44:j_idt61_input">...</select></div>
<a class="ui-selectonemenu-label-container" href="#">
<label class="ui-selectonemenu-label ui-corner-all ui-state-focus">Select One</label>
</a>
<div class="ui-selectonemenu-trigger ui-state-default ui-corner-right ui-state-focus">
<span class="ui-icon ui-icon-triangle-1-s"></span>
</div>
</div>
Correct behaviour would be to apply the focus and hover classes to the outer <div> and the trigger <div> only, not to the label. I've tested that. It renders correctly.