如何更改<p：selectonemenu>的悬停/突出显示项目的背景颜色？</p：selectonemenu>

Question

如何更改<p:selectOneMenu>的悬停/突出显示项目的背景颜色？

我尝试了以下CSS选择器，但它们没有任何效果。

.ui-selectonemenu-items :hover{
    background-color: #a9c6c9;
}
.ui-selectonemenu-label:hover {
    background-color: #a9c6c9;
}

这是JSF代码：

<p:selectOneMenu>
    <f:selectItem itemLabel="by id" itemValue="1" />
    <f:selectItem itemLabel="by owner" itemValue="2" />
</p:selectOneMenu>

HTML输出：

<ul class="ui-selectonemenu-items ui-selectonemenu-list ui-widget-content ui-widget ui-corner-all ui-helper-reset" style="">
     <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all">Select Net</li>
     <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all ui-state-highlight">TEST</li>
     <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all">TEST1</li>
     <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all">TEST2</li>

Answer 1

根据Chrome开发工具（按F12），它是.ui-state-highlight类，它负责.ui-selectonemenu-item元素的背景外观。

因此，您需要改写该类。

.ui-selectonemenu-item.ui-state-highlight {
    background-color: #a9c6c9;
}

Firefox（Firebug）和IE9顺便提一下工具。右键单击HTML表示中的元素，然后选择 Inspect Element ，或者只需按F12即可查看。

Answer 2

试试这个：

.ui-selectonemenu-item.ui-selectonemenu-list-item.ui-state-highlight {
    background: #a9c6c9;
}