selectOneMenu 的第二个粗体项目答案

【问题标题】：Bold second item of a selectOneMenuselectOneMenu 的第二个粗体项目
【发布时间】：2011-12-04 17:53:40
【问题描述】：

我有一个 selectOneMenu，其中包含一个州的所有城市。我已经制作了一个 sql 以将资金放在首位，但我想将其加粗以使其对使用它的人更加可见。有没有办法将其加粗或做其他事情以使第二个选项更加明显？

<h:selectOneMenu value="#{someBean.cityId}">
     <f:selectItems value="#{addressBean.stateList}" />
</h:selectOneMenu>

【问题讨论】：

标签： java css jsf-2 selectonemenu

【解决方案1】：

<f:selectItems> 生成的 HTML <option> 元素允许非常少的细粒度样式，并且 CSS 支持依赖于浏览器。您可以使用 CSS3 :nth-child 伪选择器。例如

<h:selectOneMenu value="#{someBean.cityId}" styleClass="cities">
    <f:selectItems value="#{addressBean.stateList}" />
</h:selectOneMenu>

与

.cities option:nth-child(2) {
    font-weight: bold;
}

但这并不适用于所有浏览器。只有 Firefox 会吃，但 MSIE 和 Chrome 不会。后两者不会这样做，因为它们不允许在选项上设置font-weight。但它们允许您通过color 或background-color 更改（背景）颜色：

.cities option:nth-child(2) {
    background-color: pink;
}

到目前为止，这适用于所有支持 CSS3 的浏览器（即，因此不适用于 MSIE8 或更早版本）。

如果您想获得最佳的跨浏览器兼容性，则需要将 <select> 替换为 <ul><li> 以及大量 CSS/JS 代码，使其看起来像一个真正的下拉菜单。然后，您可以单独设置 <li> 元素的样式。您可以加入一些 jQuery 插件或寻找第 3 个 JSF 组件库。 PrimeFaces 3.0 有一个 <p:selectOneMenu> component 正是这样做的。

【讨论】：

selectOneMenu 上的 styleClass 不起作用，还有其他想法吗？它可以是不同的背景颜色或类似的东西。谢谢
如前所述，HTML <option> 元素允许非常少的细粒度样式。 Bold 仅在 Firefox 中有效（即便如此，仅当您打开下拉列表并检查列表项时！）。您可以改用background-color，但这会在浏览器中产生不同的结果。 MSIE 已经在<select> 中显示它，但 FF 和 Chrome 没有，它只在打开的下拉列表中显示它。如果你想完全控制样式，你真的必须使用模仿下拉菜单的<ul><li>。另请参阅 PrimeFaces 组件链接。
实际上，它不适用于粗体，而是使用不同的颜色。我正在检查它的外观，我看到我真的想要第二个孩子，并尝试“第二个孩子”而不是“第一个孩子”但没有成功。
改用 CSS3 :nth-child() 伪选择器。 .cities option:nth-child(2)。同样，您依赖于浏览器支持。它不适用于例如 IE8 和更早版本，仅适用于 IE9 和更新版本。我更新了答案。