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>

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: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 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 🙂

Kommentar hinzufügen

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