Change selectOneMenu stylesheet (Primefaces)

Question

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.

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.

Answer 1

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.

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 after PrimeFaces own styles. Best is to declare it in a .css file which is included by a <h:outputStylesheet> in the <h:body>.

See also:

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

Answer 2

You can style items easily if you use p:selectOneMenu. See guide for the style class names.

Maybe you can use jquery to add some styles.

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

Answer 3

What you want is to override default primefaces.css code for the selectOneMenu. To do so you have to lookup the style definition for particular element - in the file or i.e. with firebug.

For selectOneMenu it would be i.e ui-selectonemenu-items ui-selectonemenu-list (depending on what do you want to style).

Here is a nice article about overriding default Primefaces styles.

Note: I would not personally use !important as described since it can be more harmful than useful later on.

Answer 4

Similar Post: here and here.

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.