Appliquez CSS à & lt; f: selectItem & gt; imbriqué dans & lt; h: selectOneMenu & gt;

Je veux appliquer le style CSS spécifique à <f:selectItem> dans <h:selectOneMenu> à être affiché dans un style différent.

par exemple, je veux que chaque option de café dans la liste ci-dessous pour être affichés dans une couleur différente.

<h:selectOneMenu value="#{user.favCoffee1}"> 
   <f:selectItem itemValue="Cream Latte"   itemLabel="Coffee3 - Cream Latte" /> 
   <f:selectItem itemValue="Extreme Mocha" itemLabel="Coffee3 - Extreme Mocha" /> 
   <f:selectItem itemValue="Buena Vista"   itemLabel="Coffee3 - Buena Vista" /> 
</h:selectOneMenu>`

Quelqu'un peut m'aider ici?

source d'informationauteur Sana

  1. 10

    La <f:selectItem> rend un HTML <option> élément. Il y a peu de CSS style de soutien. Le color propriété n'est pas parmi eux. Même plus, il travaille dans MSIE, pas dans les autres navigateurs internet. Il n'y a cependant aucun moyen de donner à chaque <option> élément de sa propre style attribut par JSF, donc plus proche que vous pouvez obtenir est l'application d'une règle CSS sur toutes les options et en acceptant qu'il fonctionne dans MSIE.

    <h:selectOneMenu styleClass="mymenu">

    avec

    .mymenu option {
    color: red;
}

    Votre meilleur pari est de remplacer la liste par un <ul><li> avec un bon coup de CSS/JavaScript qui imite l'apparence d'une liste déroulante. Certaines bibliothèques de composants JSF a un tel composant, comme PrimeFaces' <p:selectOneMenu>. De vérifier la de contenu Personnalisé exemple dans son 3.0 vitrine.

  2. -4

    Je ne suis pas familier avec JSF, mais je suppose que le <f:selectItem> n'est pas ce qui est envoyé au navigateur.

    Vous aurez besoin de comprendre à quel HTML est envoyé au navigateur pour que la balise JSF, et d'appliquer votre CSS.