将 CSS 应用于嵌套在 <h:selectOneMenu> 中的 <f:selectItem>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6747311/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Apply CSS to <f:selectItem> nested in <h:selectOneMenu>
提问by Sana
I want to apply CSS specific to <f:selectItem>in <h:selectOneMenu>to be displayed in a different style.
我想应用特定于<f:selectItem>in 的CSS 以<h:selectOneMenu>不同的样式显示。
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?
有人可以帮我从这里出去吗？
回答by BalusC
The <f:selectItem>renders a HTML <option>element. It has very limited CSS styling support. The colorproperty 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 styleattribute by JSF, so closest what you can get is applying a CSS rule on all options and accepting that it works in MSIE only.
将<f:selectItem>呈现一个HTML<option>元素。它对 CSS 样式的支持非常有限。该color属性是不在其中。更重要的是，它仅适用于 MSIE，不适用于其他网络浏览器。然而，JSF无法为每个<option>元素赋予其自己的style属性，因此您能得到的最接近的是在所有选项上应用 CSS 规则并接受它仅适用于 MSIE。
<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 contentexample in its 3.0 showcase.
最好的办法是<ul><li>用一个很好的 CSS/JavaScript替换下拉列表，它模仿它看起来像一个下拉列表。一些 JSF 组件库有这样的组件，比如 PrimeFaces' <p:selectOneMenu>。检查其3.0 展示中的自定义内容示例。
回答by Paul D. Waite
I'm not familar with JSF, but I assume the <f:selectItem>is not what gets sent to the browser.
我不熟悉 JSF，但我认为这<f:selectItem>不是发送到浏览器的内容。
You'll need to figure out what HTML issent to the browser for that JSF tag, and apply your CSS to that.
您需要弄清楚为该 JSF 标记发送到浏览器的HTML是什么，并将您的 CSS 应用于该标记。
