java - selectOneMenu 的粗体第二项

Question

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

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

Answer 1

HTML <option> <f:selectItems> 生成的元素允许非常少的细粒度样式，并且 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正是这样做的。