Bold second item of a selectOneMenu

Question

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>

Answer 1

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>

with

.cities option:nth-child(2) {
    font-weight: bold;
}

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;
}

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

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.