HTML Select-Boxen stylen und verschönern mit Chosen

Ein beliebtes Thema für alle Frontender. Wie style ich Select-Boxen, sodass nicht nur der Kunde, sondern auch der Grafiker und nicht zuletzt auch der Frontender selbst zufrieden sein kann. Eine gelungene Alternative ist Chosen.

Chosen ist ein Javascript-Plugin, das für jQuery ab 1.4 bereit steht.
Die Einbindung von Chosen in euren Drupal-Projekten ist einfach und schnell erklärt.

https://www.drupal.org/project/chosen

Das Chosen jQuery-Plugin wird unter „sites/all/libraries“ entpackt.
Anschließend laden und aktiviert Ihr das Chosen-Modul und konfigurieren es nach euren wünschen „administer › configuration › user interface › chosen“. Die Möglichkeiten von Chosen findet Ihr hier im Überblick.

Wie jedes Plugin hat auch dieses seine Vor- und Nachteile.

Ein großer Nachteil ist die fixe Breiteneinstellung von Chosen die man in der Konfiguration vornehmen muss. Leider ist es dort nicht möglich flexible Breiten zu hinterlegen. Für diesen Fall muss man entweder per CSS und einem ungeliebten „!important“ arbeiten oder man überschreibt das Plugin selbst und schmeißt per Javascript alle Inline-Styles raus.
Ein weiterer großer Nachteil ist die Mobile Darstellung von Chosen. Diese ist nämlich nicht vorhanden und man muss auf altbewerte CSS-Tricks zurückgreifen.

Trotz dieser zwei großen Nachteile kann man ein positives Fazit ziehen.

Dank Chosen kann man schnell und einfach Select-Boxen Themen und konfigurieren. Chosen macht nicht alles – aber dafür vieles möglich.

Zusammenfassung

Browser:

  • Firefox
  • Safari
  • Chrome
  • IE8+

Vorteile:

  • leichte und verständliche Konfiguration
  • viele Konfigurationsmöglichkeiten
  • optimale Gestaltungsmöglichkeiten

Nachteile:

  • feste Breiteneinstellung
  • keine Mobile Unterstützung

Was kann Chosen:

  • Standart Select mit und ohne Suchfunktion
  • Multiple Select mit deaktivierbaren Optionen
  • Placeholder Support
  • No Results Text Support
  • Einschränkung der wählbaren Optionen
  • Right to Left Support