CSS 更改 selectOneMenu 样式表（Primefaces）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14204797/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change selectOneMenu stylesheet (Primefaces)
提问by Goot
I want to change the background color of my selectOneMenu. When I try to set the style to style="background-color:#f6f6f6"there is no change at all.
我想更改我的 selectOneMenu 的背景颜色。当我尝试将样式设置style="background-color:#f6f6f6"为完全没有变化时。
I tried to wrap it by a divand add a definition for it to the style.css but there has been no change so far.
我试图用 a 包装它div并将它的定义添加到 style.css 但到目前为止没有任何变化。
回答by BalusC
The styleproperty is rather useless on <p:selectOneMenu>. Look at the generated HTML output by rightclick View Sourceor Inspect Element. It would be applied on the wrapper div, not on the concrete item, let alone the list. To style the selected item, you need to select the .ui-selectonemenu-labelchild of the menu via styleClassattribute . To style the list, you need to select the .ui-selectonemenu-listchild of the panel (the dropdown) via panelStyleClassattribute.
该style属性在 上相当无用<p:selectOneMenu>。通过右键单击View Source或Inspect Element查看生成的 HTML 输出。它将应用于包装器 div，而不是具体项目，更不用说列表了。要设置所选项目的样式，您需要.ui-selectonemenu-label通过styleClass属性选择菜单的子项。要设置列表样式，您需要.ui-selectonemenu-list通过panelStyleClass属性选择面板的子项（下拉列表）。
So, all with all, this should do:
所以，总而言之，这应该做：
<p:selectOneMenu styleClass="menu" panelStyleClass="panel">
With
和
.menu .ui-selectonemenu-label {
background: pink;
}
.panel .ui-selectonemenu-list {
background: pink;
}
Make sure that the CSS is initialized/loaded afterPrimeFaces own styles. Best is to declare it in a .cssfile which is included by a <h:outputStylesheet>in the <h:body>.
确保在PrimeFaces 拥有样式之后初始化/加载 CSS 。最好是在一个.css文件中声明它，该文件包含<h:outputStylesheet>在<h:body>.
See also:
也可以看看：
回答by soniccool
You can style items easily if you use p:selectOneMenu. See guide for the style class names.
如果您使用 p:selectOneMenu，您可以轻松地为项目设置样式。请参阅样式类名称指南。
Maybe you can use jquery to add some styles.
也许您可以使用 jquery 添加一些样式。
menuWidget.items.eq(1).addClass('customclass')
回答by Fallup
What you want is to overridedefault primefaces.csscode for the selectOneMenu. To do so you have to lookup the style definition for particular element - in the file or i.e. with firebug.
你需要的是覆盖默认primefaces.css密码为selectOneMenu。为此，您必须查找特定元素的样式定义 - 在文件中或使用 firebug。
For selectOneMenuit would be i.e ui-selectonemenu-items ui-selectonemenu-list(depending on what do you want to style).
因为selectOneMenu它将是 ie ui-selectonemenu-items ui-selectonemenu-list（取决于你想要什么风格）。
Hereis a nice article about overriding default Primefaces styles.
这是一篇关于覆盖默认 Primefaces 样式的好文章。
Note: I would not personally use !importantas described since it can be more harmful than useful later on.
注意：我不会!important像描述的那样亲自使用，因为它可能比以后有用更有害。
回答by dShringi
You need to provide CSS for the element in more specific way as compared to its Primefaces specification.
Also as suggested by Fallup you shouldn't use !important, although it works but it has issues and it doesn't looks good either.
与其 Primefaces 规范相比，您需要以更具体的方式为元素提供 CSS。同样按照 Fallup 的建议，您不应该使用!important，虽然它可以工作，但它有问题，而且看起来也不好看。
