Dropdown-Standard-Styling

Es gab schon immer große Unterschiede darin, wie verschiedene Browser Formular-Elemente gestalten. Das wird wahrscheinlich auch immer so bleiben – da UI-Design-Entscheidungen nicht in den Spezifikationen festgelegt sind. Browserhersteller sehen dies vielleicht als eine Möglichkeit, das Benutzererlebnis etwas zu differenzieren. Select- (Dropdown-) Menüs sind da besonders seltsam.

Wenn ich Dropdown-Menü sage, meine ich

<select>
  <option>Apples</option>
  <option>Oranges</option>
  <option>Banannas</option>
</select>

Wenn man CSS komplett weglässt, wird dies in allen Browsern konsistent dargestellt. Auf Macs 11px Lucida Grande.

Das Styling von Select-Elementen hat sich seit dem Schreiben dieses Artikels ein wenig geändert. Mitte 2020 haben wir immer noch keine erstaunliche Styling-Kontrolle, aber man kann mit dieser Technik das Äußere ziemlich gut stylen.

Was passiert, wenn Sie die Schriftart ändern?

select {
  font-family: Cursive;
}

WebKit-Browser (Safari, Chrome) ignorieren Sie. Firefox, Opera und IE respektieren Ihre Änderung. Die font-family wird jedoch nicht in das Select-Element übernommen, Sie müssen sie explizit darauf deklarieren.

Was passiert, wenn Sie die Schriftgröße ändern?

select {
  font-size: 32px;
}

Das ist ein interessanter Punkt. In WebKit wird bei einer Schriftgröße zwischen 0 und 10 Pixeln die Schriftgröße als 10 Pixel gerendert. Von 11px bis 15px wird sie als 11px gerendert, und ab 16px wird sie (warten Sie es ab) als 14px gerendert. Dieses Verhalten ähnelt der Art und Weise, wie Suchfelder behandelt werden.

Firefox, Opera und IE respektieren Ihre Änderung, aber wieder nur, wenn sie explizit auf dem Select-Element deklariert ist, sie wird nicht übernommen.

Kann man WebKit dazu bringen, Ihre Änderungen zu respektieren?

Irgendwie. Sie können border: 0; auf den Select-Elementen setzen, und es wird wie eine etwas schlechte Version eines Dropdowns aussehen, aber immer noch eine gewisse Benutzeroberfläche haben. Es wird auch Ihre Schriftgrößen- und Stilwahl durchlassen.

Sie können auch -webkit-appearance: none; setzen und Sie erhalten eine abgerundete Eingabebox, die aber immer noch die Interaktionen eines Select-Elements hat (Klick zum Anzeigen des Menüs, Tastaturbefehle usw.). Auf diese Weise werden auch Ihre Schriftwahlen respektiert.

Ich würde sagen, das Aussehen ist Ihre beste Wahl für vollständig benutzerdefinierte Dropdowns, aber es wäre nur für WebKit, da -moz-appearance: none; zwar funktioniert, aber nicht die gesamte Chrome entfernt, nur einen Teil. Opera unterstützt appearance überhaupt nicht.

Was ist mit dem Dropdown selbst?

Damit meine ich das Ding, das die Auswahlmöglichkeiten anzeigt, wenn es aktiviert wird. Soweit ich weiß, gibt es in keinem Browser die Möglichkeit, diese zu stylen. Nicht einmal fett oder kursiv. Das Nächstliegende, was Sie an Styling erhalten können, ist, sie durch die Verwendung von zu gruppieren. Dies ist wahrscheinlich hauptsächlich eine UI-Sache, aber es könnte auch ein Sicherheitsaspekt sein. Sie möchten nicht, dass Leute mit Schriftarten herumspielen, die es unklar machen, welche Option ausgewählt ist.

Was, wenn Sie vollständige Designkontrolle wünschen?

Versuchen Sie zuerst alles, um das unnötig zu machen. Standard-Formularelemente sind vertraut und funktionieren gut. Ein Dropdown-Menü an die Schriftart und Farben Ihrer Marke anzupassen, ist normalerweise nicht notwendig und im besten Fall aufdringlich und im schlimmsten Fall schlechte UX.

Wenn Sie entscheiden, dass es absolut eine gute Idee ist, ein Dropdown anzupassen, dann sollten Sie JavaScript verwenden, um

1. Das ursprüngliche Select-Element zugänglich verstecken.
2. Das Select-Element mit benutzerdefiniertem Markup (wahrscheinlich eine Definitionsliste) neu aufbauen, das Sie nach Belieben gestalten können.
3. Alle Funktionalitäten der Standard-Select-Elemente nachzubilden, einschließlich: Tastaturereignisse wie Pfeiltasten nach oben und unten und Enter zum Auswählen, Scrollen langer Listen, Öffnen des Menüs nach oben, wenn das Select-Element am unteren Bildschirmrand liegt, um nur einige zu nennen.
4. Für Mobilgeräte das Öffnen des nativen Select-Menüs auslösen, da diese Funktionalität kaum nachzubilden ist. Zum Beispiel das iOS-Flipwheel.
5. Sie könnten auch einen "Click-Through"-Stil für Desktops in Betracht ziehen. Das Select-Element ist standardmäßig benutzerdefiniert gestaltet, aber wenn Sie darauf klicken, öffnet sich das native Dropdown-Menü (an Ort und Stelle). Wenn Sie eine Option auswählen, wird wieder das benutzerdefinierte Styling mit der angezeigten Wahl angezeigt.

Es ist viel Arbeit und leicht, etwas falsch zu machen, also seien Sie vorsichtig. Dieses Tutorial behandelt einige dieser Schwierigkeiten. Hier ist ein Pen mit einigen der Tests aus diesem Artikel.