更改selectOneMenu样式表（Primefaces）

Question

我想更改selectOneMenu的背景颜色。当我尝试将样式设置为style="background-color:#f6f6f6"时，根本没有变化。

我试图用div包装它并为它添加一个定义到style.css但到目前为止没有任何变化。

Answer 1

style属性在<p:selectOneMenu>上毫无用处。右键单击查看源或检查元素，查看生成的HTML输出。它将应用于包装器div，而不是具体项目，更不用说列表了。要设置所选项目的样式，您需要通过.ui-selectonemenu-label属性选择菜单的styleClass子项。要设置列表样式，您需要通过.ui-selectonemenu-list属性选择面板的panelStyleClass子项（下拉列表）。

所以，总而言之，这应该做到：

<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>包含该文件。

另见：

• How do I override default PrimeFaces CSS with custom styles?
• How to remove border from specific PrimeFaces p:panelGrid?

Answer 2

如果您使用p：selectOneMenu，则可以轻松设置项目样式。请参阅样式类名称的指南。

也许您可以使用jquery添加一些样式。

menuWidget.items.eq(1).addClass('customclass')

Answer 3

您想要的是{strong>覆盖 primefaces.css的默认selectOneMenu代码。为此，您必须在文件中查找特定元素的样式定义，或者使用firebug。

对于selectOneMenu，它将是ui-selectonemenu-items ui-selectonemenu-list（取决于你想要设计的样式）。

Here是一篇关于覆盖默认Primefaces样式的好文章。

注意：我不会亲自使用!important，因为它可能比以后有用更有害。

Answer 4

类似帖子：here和here。

与Primefaces规范相比，您需要以更具体的方式为元素提供CSS。 同样根据费卢普的建议你不应该使用!important，虽然它有效，但它有问题但看起来也不好。