DropDown mit Hilfe von CSS3 stylen, Mockup

Dropdown mit CSS3 gestalten

Eine der größten Herausforderungen für den geneigten Frontend-Entwickler ist das Stylen von Formularfeldern. Die kleinteilige Arbeit, spezielle Wünsche der Grafikabteilung und zahlreiche Browser-Besonderheiten bringen den Programmierer hier regelmäßig an seine Geduldsgrenze. Die Lösung ist meist der Einsatz von jQuery-Plugins, über die das zugrundeliegende HTML komplett umgebaut wird – eine nicht immer so elegante Lösung. Beispielsweise wird auch das native Standardverhalten von Dropdowns auf mobilen Endgeräten unterbunden, was nicht immer gewollt ist.

CSS3 erleichtert uns die Arbeit mittlerweile etwas und stellt Möglichkeiten zur Verfügung, das Aussehen von Formularfeldern ohne Zuhilfenahme von JavaScript zu beeinflussen. In diesem kurzen Tutorial wollen wir davon Gebrauch machen und ein optisch ansprechendes Select-Auswahlfeld gestalten. Dieses soll einen transparenten Hintergrund, Schatten und abgerundete Ecken erhalten. Außerdem wird ein individueller Pfeil vergeben, den wir aus der OpenSource-Icon-Schriftart FontAwesome entnehmen und über fontello integrieren.

Das Grundgerüst

Das HTML halten wir so simpel wie möglich und setzen ein einfaches <select> auf einen grünen Hintergrund. Die einzige Veränderung, die wir zu Beginn vornehmen, ist ein Wrapper mit der CSS-Klasse „select-wrapper“, den wir um das Element legen und dem wir eine Breite von 200px mitgeben. Wir werden diesen später benötigen, wenn wir den Pfeil integrieren.

<div class="select-wrapper">
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
</div>
.select-wrapper {
  width: 200px;
}

Ungestylt schaut das <select> recht trostlos aus (links), unser Ziel ist die Vorlage (rechts), in der das Element auf eine ansprechende Art und Weise mit dem Hintergrund harmoniert:

Dropdown ungestylt Dropdown gestylt

Browser-Styles entfernen

Im ersten Schritt reduzieren wir die Standard-Formatierung der zu berücksichtigenden Browser auf ein Minimum. Wir erreichen das über die CSS3-Eigenschaft „appearance“, die wir auf „none“ setzen. Hierbei müssen wir beachten, dass wir Präfixe für die Browser Chrome, Safari und Firefox vergeben. Außerdem entfernen wir den auffälligen Rahmen.

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
}

Nun sollte es in fast allen Browsern ungefähr so ausschauen:

Dropdown ohne Browser-Styling

In fast allen? Ganz recht! Der Internet Explorer macht uns hier noch einen Strich durch die Rechnung und zeigt uns nach wie vor den Standard-Pfeil an. Wir schreiben dem IE daher eine Extra-Einladung mit folgendem Code-Schnipsel:

select::-ms-expand {
  display: none;
}

Nun kann es aber mit dem eigentlichen Styling losgehen.

Abstände und transparenter Hintergrund

Wir kümmern uns als nächstes darum, dem Element ein wenig Innenabstand zu geben. Dazu können wir ganz einfach mit width, height und padding arbeiten. Da wir für den übergeordneten Wrapper bereits eine Breite vergeben haben, strecken wir das <select> auf 100%. Beim padding ist zu beachten, dass der Firefox einen minimalen Abstand von Haus aus generiert, den wir nicht zurücksetzen können. Dieser sollte aber nicht weiter stören.

Da wir im <select> nicht mit der CSS-Eigenschaft „opacity“ arbeiten können, verwenden wir für den Hintergrund ein transparentes Pixel im PNG-Format, das wir in x- und y-Richtung wiederholen. Wer sich die Arbeit sparen möchte, für das Pixel sein Grafikprogramm zu öffnen, kann sich hier z.B. auch einfach eines generieren lassen: www.1x1px.me.

Mit dem folgenden CSS haben wir uns unserer Vorlage ein großes Stück angenähert:

select {
  /* ... */
  width: 100%;
  height: 40px;
  padding-left: 10px;
  background: url(fff-0-2.png) repeat;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
}

 

Dropdown mit transparentem Hintergrund

Schatten hinzufügen, Ecken abschleifen, Bugs fixen

Die Eigenschaften „border-radius“ und „box-shadow“ geben unserem Element den nötigen Feinschliff. Ein transparentes Schwarz soll als Schatten genügen:

select {
  /* ... */
  box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.3);
  border-radius: 3px;
}

Die Browser bringen nach wie vor noch einige unschöne Besonderheiten mit sich, die wir aber verändern können. Im Chrome fällt uns auf, dass ein unschöner, blauer Rahmen gezeichnet wird, wenn wir das Element fokussieren. Dieses Verhalten kann leicht modifiziert werden:

select {
  /* ... */
  outline: none;
}

Während die mobilen Geräte alle brav ihre nativen Menüs bei Touch auf das <select> aufklappen, fällt uns in den Desktop-Browsern auf unangenehme Art und Weise auf, dass sich die weiße Schriftart, die wir verwendet haben, auch auf die Auswahlliste auswirkt. Entsprechend setzen wir hier unsere Schriftfarbe zurück:

select option {
  color: #666;
}

Zu guter letzt fühlen wir dem Internet Explorer nochmal richtig auf den Zahn und werden fündig: Nachdem wir eine Option markiert haben, verfärbt sich das <select> unschön. Aber auch das können wir beeinflussen:

select:focus::-ms-value {
  background-color: transparent;
}

Für das optimale „Button-Click-Feeling“ fehlt uns nur noch ein kleines Detail: Wir verändern beim Hovern unseren Mauszeiger!

select {
  /* ... */
  cursor: pointer;
}

Ein Detail: Der Pfeil!

Beinah könnte unser Dropdown jetzt als Button durchgehen, doch das lassen wir nicht zu und holen uns das Dropdown-Aussehen zurück, indem wir den Pfeil aus fontello über dem <select> positionieren. Dabei stellen wir schnell fest, dass das auf dem <select> selbst nicht möglich ist. Nun kommt also unser Wrapper ins Spiel, den wir relativ positionieren. So können wir den Pfeil einfach als :before-Element einbinden und diesen absolut positioniert in den Wrapper legen. Das könnte im Stylesheet ungefähr so ausschauen:

.select-wrapper {
  /* ... */
  width: 200px;
}

.select-wrapper::before {
  font-family: fontello;
  content: "\f107";
  font-size: 20px;
  position: absolute;
  right: 15px;
  top: 10px;
  color: #fff;
}

Die Einbindung über fontello haben wir in einem vorangegangen Beitrag bereits thematisiert.

Ein kleines Detail fehlt aber noch. Zwar erscheint der Pfeil an der richtigen Position, aber natürlich soll er auch klickbar sein und das <select> öffnen. Wir behelfen uns dazu mit einem Trick und lassen das klickbare <select> sozusagen „durchscheinen“:

.select-wrapper:before {
  /* ... */
  pointer-events: none;
}

Fertig! Wir überprüfen noch einmal unser <select> in allen Browsern und auf allen Geräten und sind mit dem Ergebnis ganz zufrieden.

Dropdown gestylt

Wer weitere Anregungen, Ideen oder Ergänzungen zum Thema hat, darf sich gern in den Kommentaren dazu austoben.

  • 05/12/2017

    Kommentar von Ron

    Hi,
    wäre vielleicht ganz cool, wenn Du an dieser Stelle das Einbinden über Fontello erläuterst.
    Das erspart viel googlen. Und wenn Du Dir schon so viel Arbeit machst, den Style zu erklären, sollte so etwas dazu gehören.

    • 13/12/2017

      Kommentar von Christoph

      Hallo Ron,
      vielen Dank für deine Anmerkung! Ich habe im Text nochmal einen Link zu einem anderen Blog-Beitrag von uns ergänzt: https://www.clickstorm.de/blog/icons-gesucht-font-awesome/
      Dort haben wir das Einbinden der Fontello-Schriftart schonmal thematisiert.

  • 18/05/2018

    Kommentar von Christoph

    Sehr cooles Tutorial, Danke Christoph! Auch die kleinen IE Hacks haben mir viel Zeit gespart 🙂

  • 09/07/2018

    Kommentar von Oliver

    QUOTE: Da wir für den übergeordneten Wrapper bereits eine Breite vergeben haben …

    Haben wir? Wo denn?

    • 10/07/2018

      Kommentar von Christoph

      Hallo Oliver,
      danke für den Hinweis. Ich hatte zwar die Wrapper-Breite im Text ganz oben angesprochen, aber kein entsprechendes CSS-Schnipsel eingefügt. Das habe ich mal ergänzt.

  • 19/07/2018

    Kommentar von Marvin

    Selbst wenn ichs 1:1 abkopiere gehts nicht was mach ich da bitte falsch? ._.

    • 30/07/2018

      Kommentar von Marc

      Hallo Marvin, was genau funktioniert denn nicht?

  • 20/07/2018

    Kommentar von Jürgen

    Hey ich hab bei Fontello gesehen das die eine Kopierrechtslizenz haben aber ich möchte es verwenden um damit Geld zu verdienen. Kann ich das machen oder was wäre meine alternative?

    • 30/07/2018

      Kommentar von Marc

      Hallo Jürgen, meines Wissens nach kann Fontello auch für kommerzielle Zwecke eingesetzt werden. Die aktuelle Lizenz findest du hier https://github.com/fontello/fontello/wiki/What-about-license%3F. Viele Grüße, Marc

  • 28/08/2018

    Kommentar von Klaus

    Ein exzellenter Artikel:

    Kleiner Hinweis: das separate transparaente PNG kann man auch durch ein eingebettetes transparents GIF ersetzen:

    background: url(„data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==“) repeat;

    Klappt natürlich nicht mit IE7 und älter.

  • 19/09/2018

    Kommentar von Peter Pan

    Für mich als Anfänger war alles bis ‚Der Pfeil‘ verständlich. Bei fontello.com habe ich den nötigen Pfeil gefunden und die Datei heruntergeladen (fontello-118bb044.zip).
    Welche der vielen CSS Dateien soll in meine CSS Datei verlinkt werden? Die anderen Dateien font & config.json igonieren?
    „Icons gesucht font awesome“ Artikel habe ich auch gelesen.

    Die Datei font-awesome.min.css ist bei mir nicht vorhanden.
    fotawesome.css fontawesome-code.css und andere schon.

    Wäre schön wenn es genauer beschrieben wäre, die Profis könnten den Abschnitt ja überspringen.
    Trotzdem danke.
    PS: Wenn ich mein Text hier reinkopiere, kommt die Meldung ich soll ein Kommentar eingeben.

    • 19/09/2018

      Kommentar von Christoph

      Hallo,

      über Fontello kannst du dir ja dein eigenes Icon-Paket zusammenschnüren. Die config.json ist dann dazu da, dass du später, wenn du weitere Icons benötigst, diese wieder in Fontello importieren und konfigurieren kannst – deshalb am besten behalten. Außerdem brauchst du noch den Ordner „font“ und alle enthaltenen Font-Schriftarten. Diese werden wiederum in der fontello.css (so heißt sie zumindest bei mir) per @font-face geladen, d.h. diese Datei bräuchtest du noch für die grundlegenden Icon-Styles. Ggfs. musst du auch noch die Pfade zu deinem Font-Ordner anpassen.

      Wenn du neue Icons hinzufügst, reicht es dann, die Icons aus der *-codes.css in deine eigene CSS-Datei zu übernehmen. Falls du den IE7 noch mit unterstützen musst, dann noch die *-ie7.css per Browserweiche einbinden.

      Grüße und vielen Dank für das Feedback!

Kommentar hinzufügen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.