Apply CSS to <f:selectItem> nested in <h:selectOneMenu>

I want to apply CSS specific to <f:selectItem> in <h:selectOneMenu> to be displayed in a different style.

e.g. I want every option of coffee in the list below to be displayed in a different color.

<h:selectOneMenu value="#{user.favCoffee1}"> 
   <f:selectItem itemValue="Cream Latte"   itemLabel="Coffee3 - Cream Latte" /> 
   <f:selectItem itemValue="Extreme Mocha" itemLabel="Coffee3 - Extreme Mocha" /> 
   <f:selectItem itemValue="Buena Vista"   itemLabel="Coffee3 - Buena Vista" /> 
</h:selectOneMenu>`

开发者_如何学GoCan anyone help me out here?

The <f:selectItem> renders a HTML <option> element. It has very limited CSS styling support. The color property is not among them. Even more, it works in MSIE only, not in other webbrowsers. There is however no way to give each <option> element its own style attribute by JSF, so closest what you can get is applying a CSS rule on all options and accepting that it works in MSIE only.

<h:selectOneMenu styleClass="mymenu">

with

.mymenu option {
    color: red;
}

Your best bet is to replace the dropdown by a <ul><li> with a good shot of CSS/JavaScript which mimics it to look like a dropdown. Some JSF component libraries has such a component, such as PrimeFaces' <p:selectOneMenu>. Check the Custom content example in its 3.0 showcase.

I’m not familar with JSF, but I assume the <f:selectItem> is not what gets sent to the browser.

You’ll need to figure out what HTML is sent to the browser for that JSF tag, and apply your CSS to that.