CSS p:selectOneMenu

Question

I would like to know, how to change the background-color of a p:selectOneMenu .

I have tried this

 <p:selectOneMenu value="Select One"  style="background-color:red"  >  
            <f:selectItem itemLabel="Select One" itemValue="" /> 

.....

But the background is still white.

Answer 1

Try panelStyle attribute as given below:

<p:selectOneMenu value="Select One"  panelStyle="background-color:red"  >  
        <f:selectItem itemLabel="Select One" itemValue="" /> 

Answer 2

The visual appearance is determinated by a surrounding <div> and a <label> . The easiest way is to give 'red' background to "everything" inside your p:selectOneMenu :

<p:selectOneMenu value="Select One"  styleClass="redSelect">

while in your <h:head> :

.redSelect > * {
    background: red;
}

In addition to change the background of the drop-down menu, overwrite the background property of the following CSS class combination:

.ui-selectonemenu-items.ui-selectonemenu-list {
    background: red !important;
}

Answer 3

这是正确的答案：

.ui-selectonemenu input.ui-selectonemenu-label{ background: red; }