将 CSS 应用于嵌套在 <h：selectOneMenu 中的 <f：selectItem>>

Question

我想在<h:selectOneMenu>中应用特定于<f:selectItem>的CSS，以不同的样式显示。

。我希望下面列表中的每个咖啡选项都以不同的颜色显示。

<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>`

谁能帮我一下吗?

Answer 1

<f:selectItem>呈现HTML <option>元素。它的CSS样式支持非常有限。color属性不在其中。更重要的是，它只能在MSIE中工作，而不能在其他浏览器中工作。然而，JSF没有办法给每个<option>元素赋予自己的style属性，所以你能得到的最接近的是在所有选项上应用一个CSS规则，并接受它只在MSIE中工作。

<h:selectOneMenu styleClass="mymenu">

.mymenu option {
    color: red;
}

你最好的选择是用<ul><li>替换下拉菜单，用一个很好的CSS/JavaScript镜头模仿它看起来像一个下拉菜单。一些JSF组件库有这样一个组件，比如PrimeFaces的<p:selectOneMenu>。查看3.0展示中的自定义内容示例。

我不熟悉JSF，但我认为<f:selectItem>不是发送给浏览器的内容。

您需要弄清楚为JSF标签发送给浏览器的HTML 是什么，并将您的CSS应用于该标签。