1

selectOneMenuの背景色を変更したい。スタイルを設定しようとすると、style="background-color:#f6f6f6"まったく変化がありません。

それをaでラップし、divその定義をstyle.cssに追加しようとしましたが、これまでのところ変更はありません。

4

4 に答える 4

9

styleプロパティは ではかなり役に立ちません<p:selectOneMenu>。View SourceまたはInspect Elementを右クリックして、生成された HTML 出力を確認します。リストは言うまでもなく、具体的なアイテムではなく、ラッパー div に適用されます。選択した項目のスタイルを設定するには、属性.ui-selectonemenu-labelを介してメニューの子を選択する必要があります。リストのスタイルを設定するには、属性を介してパネルstyleClassの子 (ドロップダウン) を選択する必要があります。.ui-selectonemenu-listpanelStyleClass

したがって、すべての場合、これは次のようにする必要があります。

<p:selectOneMenu styleClass="menu" panelStyleClass="panel">

と

.menu .ui-selectonemenu-label { 
    background: pink;
}
.panel .ui-selectonemenu-list { 
    background: pink;
}

PrimeFaces 独自のスタイルの後で、CSS が初期化/ロードされていることを確認してください。.cssに含まれるファイルで宣言するのが最善<h:outputStylesheet>です<h:body>。

以下も参照してください。

于 2013-01-08T11:07:22.707 に答える
0

p:selectOneMenuを使えば簡単にアイテムのスタイリングができます。スタイル クラス名については、ガイドを参照してください。

jquery を使用してスタイルを追加することもできます。

menuWidget.items.eq(1).addClass('customclass')
于 2013-01-07T22:03:35.947 に答える
0

あなたが望むのは、のデフォルトコードをオーバーライドすることです. これを行うには、特定の要素のスタイル定義を検索する必要があります-ファイル内またはfirebugを使用します。primefaces.cssselectOneMenu

それselectOneMenuはieになりますui-selectonemenu-items ui-selectonemenu-list（何をスタイルしたいかによって異なります）。

これは、デフォルトのPrimefacesスタイルのオーバーライドに関する素晴らしい記事です。

注: 個人的には!important、後で役立つよりも有害になる可能性があるため、説明されているように使用しません。

于 2013-01-07T22:46:42.943 に答える
0

類似の投稿:こことここ.

Primefaces 仕様と比較して、より具体的な方法で要素に CSS を提供する必要があります。また、Fallup で提案されているように、使用しないでください!important。動作しますが、問題があり、見栄えもよくありません。

于 2013-01-08T04:20:08.180 に答える