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选项。但是它们允许您通过coloror更改（背景）颜色background-color：

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

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

如果你想要最好的跨浏览器兼容性，你需要用一堆 CSS/JS 代码替换<select>它<ul><li>，让它看起来像一个真正的下拉列表。然后，您可以<li>单独设置元素的样式。您可以加入一些 jQuery 插件或寻找第 3 个 JSF 组件库。PrimeFaces 3.0 有一个<p:selectOneMenu>组件可以做到这一点。