Fettes zweites Element eines selectOneMenu

Question

Ich habe ein selectOneMenu, das alle Städte eines Bundeslandes enthält. Ich habe ein Sql gemacht, um die Hauptstadt an erster Stelle zu bringen, aber ich möchte es fett machen, um es sichtbarer zu machen, wer es benutzt. Gibt es eine Möglichkeit, es fett oder etwas anderes zu tun, um mehr sichtbar nur die zweite Option zu machen?

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

Answer 1

Das HTML <option> Element, wie es von <f:selectItems> erlaubt nur sehr wenig feinkörniges Styling und die CSS-Unterstützung ist browserabhängig. Sie könnte verwenden Sie die CSS3 :nth-child Pseudoselektor. z.B.

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

mit

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

Dies funktioniert jedoch nicht in allen Browsern. Nur Firefox frisst das, aber MSIE und Chrome nicht. Die beiden letzteren tun das nicht, weil sie die Einstellung nicht erlauben font-weight auf die Option. Sie können jedoch die (Hintergrund-)Farbe ändern, indem Sie color o background-color :

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

Dies funktioniert bisher in allen CSS3-fähigen Browsern (also nicht in MSIE8 oder älter).

Wenn Sie die beste browserübergreifende Kompatibilität wünschen, müssen Sie die <select> durch eine <ul><li> zusammen mit einer ganzen Reihe von CSS/JS-Code, damit es wie ein echtes Dropdown aussieht. Sie könnten dann den Stil der <li> Elemente einzeln. Sie könnten in einigen jQuery-Plugin werfen oder für eine dritte JSF-Komponenten-Bibliothek zu suchen. PrimeFaces 3.0 hat eine <p:selectOneMenu> Komponente die genau das tut.