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.
The HTML element as generated by allows for very little fine-grained styling and the CSS support is browser-dependent. You could use the CSS3 :nth-child pseudoselector. E.g.
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 by an along with a good bunch of CSS/JS code to make it look like a real dropdown. You could then style the elements individually. You could throw in some jQuery plugin or to look for a 3rd JSF component library. PrimeFaces 3.0 has a