selectOneMenu的粗体第二项 [英] Bold second item of a selectOneMenu

问题描述

我有一个selectOneMenu有所有城市的状态。我做了一个sql，把资本带到了第一位，但我想大胆的使它更明显的谁在使用它。有没有办法加粗或者做其他事情，使第二个选项更明显。

I've got a selectOneMenu which has all cities of a state. I've made a sql to bring capital in first place, but i'd like to bold it to make it more visible to who is using it. Is there a way to bold it or to do something else to make more visible just the second option?

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

推荐答案

HTML < option> ; < f：selectItems> 生成的元素允许非常少的细粒度样式，CSS支持是浏览器相关的。您可以使用CSS3 ：nth-​​child 伪选择器。例如

The HTML <option> element as generated by <f:selectItems> allows for very little fine-grained styling and the CSS support is browser-dependent. You could use the CSS3 :nth-child pseudoselector. 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 。但它们允许您通过颜色或背景颜色更改（背景）颜色：

But this doesn't work in all browsers. Only Firefox eats that, but MSIE and Chrome not. The latter two doesn't do that because they don't allow setting font-weight on the option. But they allows you to change the (background) color by color or background-color:

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

这适用于所有支持CSS3的浏览器

This works in all CSS3 capable browsers so far (i.e. thus not in MSIE8 or older).

如果您希望最佳的跨浏览器兼容性，则需要替换< select> 通过< ul>< li> 以及一堆CSS / JS代码，使它看起来像一个真正的下拉列表。然后，您可以单独设置< li> 元素的样式。你可以抛出一些jQuery插件或寻找第三个JSF组件库。 PrimeFaces 3.0有一个 < p：selectOneMenu> 组件。

If you want best cross browser compatibility, you'd need to replace the <select> by an <ul><li> along with a good bunch of CSS/JS code to make it look like a real dropdown. You could then style the <li> elements individually. You could throw in some jQuery plugin or to look for a 3rd JSF component library. PrimeFaces 3.0 has a <p:selectOneMenu> component which does exactly that.

这篇关于selectOneMenu的粗体第二项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！