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