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

Question

我想申请特定CSS来<f:selectItem>在<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物业不属于他们.更重要的是,它仅适用于MSIE,而不适用于其他网络浏览器.然而,无法通过JSF 为每个<option>元素赋予自己的style属性,因此最接近的是在所有选项上应用CSS规则并接受它仅在MSIE中工作.

<h:selectOneMenu styleClass="mymenu">

同

.mymenu option {
    color: red;
}

你最好的选择是<ul><li>用一个很好的CSS/JavaScript 代替下拉,它模仿它看起来像一个下拉列表.一些JSF组件库有这样的组件,例如PrimeFaces' <p:selectOneMenu>.检查其3.0展示中的自定义内容示例.

Answer 2

I\xe2\x80\x99m 不熟悉 JSF，但我认为这<f:selectItem>不是发送到浏览器的内容。

\n\n

您\xe2\x80\x99 将需要找出该 JSF 标记发送到浏览器的 HTML 内容，并将 CSS 应用于该内容。

\n