更改selectOneMenu样式表(Primefaces)

Question

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

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

Answer 1

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

所以，all with all，这应该做:

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

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

确保CSS在 PrimeFaces自己的样式之后初始化/加载。最好是在.css文件中声明，该文件由<h:body>中的<h:outputStylesheet>包含。

参见:

• 我如何用自定义样式覆盖默认的PrimeFaces CSS ?
• 如何从特定的PrimeFaces p:panelGrid中移除边框?

Answer 2

如果使用p:selectOneMenu，您可以轻松地为项目设置样式。样式类名参见指南。

也许你可以用jquery来添加一些样式。

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

Answer 3

您想要的是覆盖默认的primefaces.css代码为selectOneMenu。要做到这一点，你必须在文件中查找特定元素的样式定义，或者使用firebug。

对于selectOneMenu，它将是ui-selectonemenu-items ui-selectonemenu-list(取决于你想要的样式)。

这是一篇关于重写默认Primefaces样式的好文章。

注:我个人不会像上面描述的那样使用!important，因为它在以后可能弊大于利。

Answer 4

类似帖子:这里和这里。

与Primefaces规范相比，需要以更具体的方式为元素提供CSS。也正如Fallup所建议的，你不应该使用!important，虽然它可以工作，但它有问题，它看起来也不太好。