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伪选择器。 E.g。

<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> component就可以了。

selectOneMenu的大胆第二项

1 个答案: