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插件或寻找第三个JSF组件库.PrimeFaces 3.0有一个<p:selectOneMenu>组件就是这样做的.