selectOneMenu的第二个粗体项

Question

我有一个全州所有城市的selectOneMenu。我已经编写了一个SQL将资金放在首位，但是我想将其加粗以使使用它的人更容易理解。有没有办法加粗它或做其他事情以使第二个选项更可见？

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

Answer 1

<option>由生成的HTML 元素只<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>组件。