Der aktuelle Stand des Stylings von Select-Elementen im Jahr 2019

Nach bestem Wissen und Gewissen, basierend auf meiner letzten Zusammenstellung der am meisten gewünschten CSS-Features, war das Styling von Formularsteuerelementen eine große Bitte. Top 5, würde ich sagen. Und von den nativen Formularelementen, die die Leute stylen möchten, hat Greg Whitworth einige Daten, dass das <select>-Element häufiger gewünscht wird als jedes andere Element – mehr als doppelt so oft wie das nächstgelegene Element – und es ist das Element, das Entwickler am häufigsten in irgendeiner Weise anpassen.

Entwickler möchten offensichtlich Select-Dropdowns stylen.

Sie tun tatsächlich ein wenig. Vielleicht mehr, als Sie denken.

Der beste Ansatz dafür stammt von Scott Jehl im Blog der Filament Group. Ich werde eine Kopie hier einbetten, damit sie leicht zu sehen ist.

Siehe den Pen
select-css von Scott/Filament Group von Chris Coyier (@chriscoyier)
auf CodePen.

Bemerkenswert ist, dass dies eine vollständig browserübergreifende Lösung ist. Es ist nichts, das nur auf die fortschrittlichsten Desktop-Browser beschränkt ist. Es gibt einige visuelle Unterschiede zwischen Browsern und Plattformen, aber insgesamt ist es ziemlich konsistent und gibt Ihnen eine Basis, von der aus Sie es weiter anpassen können.

Das ist nur die „Außenseite“

Öffnen Sie das Select. Hm, es sieht aus und verhält sich, als hätten Sie nichts daran geändert.

Einige Browser erlauben es, die Innenseite zu stylen, aber es ist sehr begrenzt. Jedes Mal, wenn ich mich damit beschäftigt habe, hatte ich eine schlechte Erfahrung, die Kompatibilität über verschiedene Browser hinweg zu gewährleisten.

Gregs Daten zeigen, dass nur 14 % (dritter Platz) der Entwickler das Styling der Außenseite als den schmerzhaftesten Teil von Select-Elementen empfanden. Ich werde mir seinen Chart stehlen, weil er absolut faszinierend ist.

Frustration	%	Anzahl
Nicht in der Lage sein, eine gute Benutzererfahrung für die Suche innerhalb der Liste zu schaffen	27.43%	186
Nicht in der Lage sein, das <option>-Element bis zum gewünschten Grad zu stylen	17.85%	121
Nicht in der Lage sein, den Standardzustand zu stylen (Dropdown-Pfeil usw.)	14.01%	95
Nicht in der Lage sein, das Pop-up-Fenster auf dem Desktop zu stylen (z. B. den Rand, Schatten usw.)	11.36%	77
Einfügen von Inhalten über einfachen Text hinaus in die <select>-Steuerung oder deren <option>s	11.21%	76
Einfügen von beliebigem HTML-Inhalt in ein <option>-Element	7.82%	53
Nicht in der Lage sein, einen unverwechselbaren Stil und ein Verhalten für nicht ausgewählte/Platzhalter zu erstellen	3.39%	23
Möglichkeit, neue Optionen aus einem großen Datensatz zu generieren, während das Popup geöffnet ist	3.10%	21
Nicht in der Lage sein, die aktuell ausgewählte(n) <option>(en) bis zum gewünschten Grad zu stylen	1.77%	12
Nicht in der Lage sein, das Pop-up-Fenster auf Mobilgeräten zu stylen	1.03%	7
Möglichkeit, dass sich die Optionen beim Scrollen automatisch wiederholen (d. h. wenn Sie eine Liste von Optionen von 1 bis 100 haben, erscheint 1 unter 100, anstatt dass der Benutzer zum Anfang zurückscrollen muss)	1.03%	7

Zusammenfassend lässt sich sagen, dass die schmerzhaftesten Teile des Stylings von Select-Elementen sind:

• Suche
• Styling des geöffneten Dropdowns, einschließlich der einzelnen Optionen, einschließlich mehr als nur Text
• Aktualisieren des Elements, ohne es zu schließen
• Styling für Fälle, in denen „nichts“ ausgewählt ist und wenn ein Element ausgewählt ist

Ich bin überrascht, dass Multi-Select nicht dabei war. Vielleicht kommt es für <select> nicht in Frage, da es nicht abwärtskompatibel wäre?

Browser-Entwicklung

Edge hat kürzlich angekündigt, dass sie das Aussehen von Formularsteuerelementen verbessern, aber es gibt noch keine Informationen über Standards oder wie sie angepasst werden können.

Es scheint jedoch eine gute Dynamik zu geben. Wenn Sie mehr Informationen wünschen und diesen Fortschritt verfolgen möchten (ich werde es tun!)

• Hören Sie sich Nicole Sullivan darüber sprechen an (beginnt etwa bei Minute 16).
• Lesen Sie Greg Whitworths „Können wir das <select>-Steuerelement bitte stylen?!“. Es geht tief in all dies ein.