将CSS应用于< f：selectItem>嵌套在< h：selectOneMenu> [英] Apply CSS to <f:selectItem> nested in <h:selectOneMenu>

问题描述

我要对< f：selectItem> 在< h：selectOneMenu> 以不同的样式显示。

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

  ; h：selectOneMenu value =＃{user.favCoffee1}> 
< f：selectItem itemValue =Cream LatteitemLabel =Coffee3  -  Cream Latte/> 
< f：selectItem itemValue =Extreme MochaitemLabel =Coffee3  -  Extreme Mocha/> 
< f：selectItem itemValue =Buena VistaitemLabel =Coffee3  -  Buena Vista/> 
< / h：selectOneMenu>`
  

< f：selectItem> 会呈现一个HTML <$ c $ c>< option> 元素。它有非常有限的CSS样式支持。属性中不包括 color 属性。甚至更多，它只在MSIE工作，而不是在其他网络浏览器。然而没有办法给每个< option> 元素自己的 style 属性通过JSF，

 < h：selectOneMenu styleClass = mymenu> 
  

  .mymenu选项{
 color：red; 
} 
  

最好的办法是将下拉菜单替换为 < ul>< li> 使用CSS / JavaScript的模拟效果，看起来像一个下拉列表。一些JSF组件库具有这样的组件，例如PrimeFaces的< p：selectOneMenu> 。请在 3.0展示中查看自定义内容示例。

I want to apply CSS specific to <f:selectItem> in <h:selectOneMenu> to be displayed in a different style.

e.g. I want every option of coffee in the list below to be displayed in a different color.

<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>`

Can anyone help me out here?

解决方案

The <f:selectItem> renders a HTML <option> element. It has very limited CSS styling support. The color property is not among them. Even more, it works in MSIE only, not in other webbrowsers. There is however no way to give each <option> element its own style attribute by JSF, so closest what you can get is applying a CSS rule on all options and accepting that it works in MSIE only.

<h:selectOneMenu styleClass="mymenu">

with

.mymenu option {
    color: red;
}

Your best bet is to replace the dropdown by a <ul><li> with a good shot of CSS/JavaScript which mimics it to look like a dropdown. Some JSF component libraries has such a component, such as PrimeFaces' <p:selectOneMenu>. Check the Custom content example in its 3.0 showcase.

这篇关于将CSS应用于&lt; f：selectItem&gt;嵌套在&lt; h：selectOneMenu&gt;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！