1

のホバー/ハイライトされたアイテムの背景色を変更するにはどうすればよい<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>
4

2 に答える 2

2

これを試してください：

.ui-selectonemenu-item.ui-selectonemenu-list-item.ui-state-highlight {
    background: #a9c6c9;
}
于 2012-08-17T07:11:50.857 に答える
2

Chrome 開発ツール (F12 キーを押す) によると、要素.ui-state-highlightの背景の外観を担当するのはクラスです。.ui-selectonemenu-item

ここに画像の説明を入力

そのため、代わりにそのクラスをオーバーライドする必要があります。

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

ちなみに、Firefox (Firebug) と IE9 には同じツールがあります。HTML 表現の要素を右クリックしてInspect Elementを選択するか、単に F12 を押して表示します。

于 2012-08-16T19:15:37.630 に答える