更改selectOneMenu样式表(Primefaces) [英] Change selectOneMenu stylesheet (Primefaces)

问题描述

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

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.

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

I tried to wrap it by a div and add a definition for it to the style.css but there has been no change so far.

推荐答案

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

The style property is rather useless on <p:selectOneMenu>. Look at the generated HTML output by rightclick View Source or 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-label child of the menu via styleClass attribute . To style the list, you need to select the .ui-selectonemenu-list child of the panel (the dropdown) via panelStyleClass attribute.

因此，这应该做到:

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

使用

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

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

Make sure that the CSS is initialized/loaded after PrimeFaces own styles. Best is to declare it in a .css file which is included by a <h:outputStylesheet> in the <h:body>.

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

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

这篇关于更改selectOneMenu样式表(Primefaces)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！