Ändern selectOneMenu stylesheet (Primefaces)

Möchte ich den hintergrund ändern, die Farbe von meinen selectOneMenu. Wenn ich versuche den Stil zu style="background-color:#f6f6f6" es gibt überhaupt keine Veränderung.

Ich versucht, wickeln Sie es durch ein div und fügen Sie eine definition für Sie zu dem Stil.css, aber es hat sich nichts geändert bisher.

  • Können Sie mehr code zeigen? Vielleicht etwas widersprüchlich?
InformationsquelleAutor Goot | 2013-01-07
  1. 9

    Den style Eigenschaft ist ziemlich nutzlos auf <p:selectOneMenu>. Blick auf den generierten HTML-Ausgabe durch Rechtsklick View Source oder Element Untersuchen. Es würde angewendet werden, die auf die wrapper-div, nicht auf die konkrete Sache, geschweige denn in der Liste. Stil des ausgewählten Elements, die Sie brauchen, um wählen Sie die .ui-selectonemenu-label Kind von dem Menü über styleClass Attribut . Um den Stil in der Liste, müssen Sie die .ui-selectonemenu-list Kind das Fenster (dropdown) über panelStyleClass Attribut.

    So, alle mit allen, sollte dies tun:

    <p:selectOneMenu styleClass="menu" panelStyleClass="panel">

    Mit

    .menu .ui-selectonemenu-label { 
    background: pink;
}
.panel .ui-selectonemenu-list { 
    background: pink;
}

    Stellen Sie sicher, dass die CSS-Datei wird initialisiert/geladen nach PrimeFaces eigenen Stile. Am besten ist es zu erklären in einem .css - Datei, die enthalten ist, durch eine <h:outputStylesheet> im <h:body>.

    Siehe auch:

    InformationsquelleAutor BalusC
  2. 0

    Können Sie Stil-Elemente leicht, wenn man mit p:selectOneMenu. Siehe Leitfaden für die style-Klassen-Namen.

    Vielleicht kannst du jquery verwenden, fügen Sie einige Stile.

    menuWidget.items.eq(1).addClass('customclass')
    • diese muss dieselbe sein wie die styleclass="backgroundclass", hat nicht funktioniert. Ich auch die hintergrund-Farbe !wichtig
    InformationsquelleAutor soniccool
  3. 0

    Was Sie wollen, ist überschreiben Standard primefaces.css code für die selectOneMenu. Daher haben Sie nachschlagen die style-definition für das element - in der Datei oder z.B. mit firebug.

    Für selectOneMenu es wäre ich.e ui-selectonemenu-items ui-selectonemenu-list (je nachdem, was Sie wollen Stil).

    Hier ist ein schöner Artikel über das überschreiben des Standard-Primefaces-Stile.

    Hinweis: würde ich persönlich nicht verwenden !important wie beschrieben, denn es kann mehr schädlich als nützlich später.

    InformationsquelleAutor Fallup
  4. 0

    Ähnlichen Beitrag: hier und hier.

    Müssen Sie die CSS-Datei für das element in spezifischer Weise im Vergleich zu seinen Primefaces-Spezifikation.
    Auch wie vorgeschlagen von Fallup sollten Sie nicht verwenden !important, obwohl es funktioniert, aber es Probleme hat und es nicht gut aussieht, entweder.

    InformationsquelleAutor dShringi
Schreibe einen Kommentar