css - 将 CSS 应用于 <f :selectItem> nested in <h:selectOneMenu>

Question

我想应用特定于 <f:selectItem> 的 CSS在 <h:selectOneMenu>以不同的风格展示。

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

<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属性(property)不在其中。更重要的是，它仅适用于 MSIE，不适用于其他网络浏览器。然而，没有办法给每个 <option>自己的元素 style JSF 的属性，最接近的是在所有选项上应用 CSS 规则并接受它仅在 MSIE 中工作。

<h:selectOneMenu styleClass="mymenu">

与

.mymenu option {
    color: red;
}

最好的办法是用 <ul><li> 替换下拉菜单用一个很好的 CSS/JavaScript 来模拟它看起来像一个下拉菜单。一些 JSF 组件库有这样的组件，例如 PrimeFaces 的 <p:selectOneMenu> .检查其 3.0 showcase 中的自定义内容示例.