Question

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

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

<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 showcase。

中的自定义内容示例

Answer 2

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

您需要弄清楚该标记发送到浏览器的HTML 是什么，然后将CSS应用到该标记中。

将CSS应用于<f：selectitem>嵌套在<h：selectonemenu> </h：selectonemenu> </f：selectitem>

2 个答案: