我想将特定于<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>`

有人可以帮我从这里出去吗?

最佳答案

<f:selectItem>呈现HTML <option>元素。它具有非常有限的CSS样式支持。 color属性不在其中。更重要的是,它仅适用于MSIE,不适用于其他Web浏览器。但是,无法通过JSF为每个<option>元素赋予其自己的style属性,因此,您所能获得的最接近的结果是在所有选项上应用CSS规则,并接受它仅在MSIE中起作用。

<h:selectOneMenu styleClass="mymenu">


.mymenu option {
    color: red;
}

最好的选择是将下拉列表替换为<ul><li>,并使用CSS/JavaScript进行模拟,使其看起来像一个下拉列表。一些JSF组件库具有这样的组件,例如PrimeFaces的<p:selectOneMenu>。检查其3.0 showcase中的自定义内容示例。

关于css - 将CSS应用于<f :selectItem> nested in <h:selectOneMenu>,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/6747311/

10-12 13:01
查看更多