Hier beschreibe ich das Styling des Select- und Option Elements mit reinem CSS – soweit es im Moment geht. Dabei kommen SVG, Browserweichen und Conditional Comments für maximale Compability zur Anwendung. Hier erstmal das fertige Beispiel inklusive Code zum ansehen:
Generelle Herangehensweise an Formelement-Styling
Das Styling von Form-Elementen ist im Grunde ein alter Hut. Es gibt zwei grundsätzliche Richtungen – das Styling per CSS der originalen Formelemente oder der Nachbau mit Javascript. Spätestens seit die mobilen Geräte auftauchten, stellte sich der Nachbau als relativ schwierig heraus. Etliche mobilen Betriebssysteme bringen eigene Komponenten mit, so für die Optionen des Select-Elements das Wheel in iOS bzw. ein modaler Dialog in Android.
Es steigert die Benutzbarkeit, auf Eigenkreationen zu verzichten – denn die Vielzahl der Geräte können das für sich besser entscheiden. Und diese Lösungen bleiben dann auch im Verlauf der Zeit stabil.
Beim Styling von Form-Elementen sollte die Aufmerksamkeit darauf liegen, das das Design der Funktion folgt und die Benutzer nicht übermäßig herausfordert. Sehr gut beschrieben für Text-Input, Radiobuttons und Checkboxen hat das Jonas Hellwig hier: https://blog.kulturbanause.de/2015/03/formular-styling-mit-css-select-listen-radio-buttons-und-checkboxen-individuell-gestalten/.
Das Select-Element
Das Select-Element braucht noch einige Erweiterung.
Zuerst blenden wir die Browser-Default-Elemente aus:
Zum Ausblenden des Browser-Pfeils kommt mit Browser-Prefix zur Anwendung:
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;Der -webkit-Prefix greift auch für MS Edge und Opera.
Und so verstecken wir den Pfeil für den IE 10. Ältere IEs behandeln wir später.
select::-ms-expand {
display: none;
}Mit den Attributen width, border, border-radius, font-size und color ist die Veränderbarkeit gradlinig wie erwartet.
Der Pfeil
Den Pfeil setzen wir per Background-Image. Da wir eh nicht ältere IEs stylen können, können wir auch SVG an stelle von Bildern nehmen. Das wird kleiner und bleibt auch bei Retina-Display scharf.
data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20276.7%20153%22%20enable-background%3D%22new%200%200%20276.7%20153%22%3E%3Cstyle%3E.arrow%7Bfill%3A%23777777%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22arrow%22%20d%3D%22M276.7%200H0l138.2%20153z%22%20%2F%3E%3C%2Fsvg%3E
Die Farbe könnt Ihr ganz einfach anpassen: ändert einfach die 777777 zu Eurer gewünschten Farbe in Hex-Schreibweise.
Mit background-position: right 10px center; background-repeat: no-repeat; background-size: auto 20%; steuert ihr die Positionierung des Pfeils. Genügend Platz schafft ihr padding: 10px 30px 10px 10px;.
Option-Styling und Firefox-Anpassung
Das Option-Menü, also die Ansicht der Auswahlpunkte läßt sich in allen Webkit-Browsern nicht beeinflussen. Dort kommt immer die Standard-Browser-Ansicht. Der Firefox allerdings kann das.
@-moz-document url-prefix() { ... }
Ich habe die Angaben direkt in diese Browserweiche gebaut, damit das nur zum Zuge kommt, wo wir Einfluß nehmen können.
Webkit und Mozilla interpretieren das CSS anders. Beim Webkit wird nur das Padding vom Select-Element interpretiert. Mozilla hingegen addiert das Padding des Option-Elementes oben und unten mit hinzu, was ungewünschte Effekte mit sich bringt.
Deshalb setze ich das Padding für Select zurück und füge es bei Option hinzu.
@-moz-document url-prefix() {
select {
padding: 0 30px 0 10px;
}
option {
padding: 10px;
background-color: #555;
color: #FFF;
border-top: 1px solid #777;
}
}Das Styling des Hintergrundes von Option ist wieder sehr erwartbar. Das setzten der Hintergrundfarbe für :aktive bzw. :hover ist es nicht. Hier brauchen wir wieder einen Hack: mit einem farbigen Hintergrundbild geht das. Da ich auch hier lieber alles im CSS habe, kommt ein Base64 enkodiertes 1×1 Pixel Bild zum Einsatz. Sehr schön zu generieren geht das hier: https://png-pixel.com/
@-moz-document url-prefix() {
option:checked, option:hover {
background: #CCCCCC repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mM88x8AAp0BzdNtlUkAAAAASUVORK5CYII=);
}
}Active-State von Selctboxen
Um die Markierungen um das Select-Feld loszuwerden, kann outline: none; verwendet werden. Ob das sinnvoll ist bleibt hier auch zu hinterfragen, aber Agenturen wollen das oft. Firefox hat zusätzlich noch eine gestrichelte Linie innen im Select-Feld. Das entfernt man so (warum auch immer, logisch erschließt es sich mir nicht)
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}Internet Explorer
MS Edge spielt bei der Gestaltbarkeit mit und verhält sich ähnlich den Webkit-Browsern. Unterhalb des IE 10 greift das Ausblenden schon nicht, deshalb haben wir keine Wahl und nehmen dort das Default-Element. Da wir unseren eigenen Pfeil dafür ausblenden müssen, setze ich mit Conditional Comments eine Klasse, die nur für IE kleiner 10 erscheint. Das kann irgendwo oberhalb des Formulars sein und sollte unterhalb der Form wieder geschlossen werden.
<!--[if lt IE 10]><div class="lt-ie10"><![ENDIF]-->
/* hide the SVG arrow for IE older than IE10 */
.lt-ie10 select {
background-image: none;
}
<!--[if lt IE 10]></div><![ENDIF]-->Und als letztes: IE 10 and IE 11 können keine SVG im Hintergrund. Dafür gibt es dann noch ein .png – wieder Base64 encodiert. Dafür nutze ich dieses Tool: https://www.base64-image.de/.
Fazit
Es ist eine unglaubliche menge an Code für eine kleine Selectbox. Schön ist das nicht. Gebt euch lieber dem Flow des Standard-Elementes hin und taucht in das Dao des Webdesigns. Und wenn es sich nicht umgehen läßt, habt ihr hier ein Hilfsmittel. Das Beispiel und den vollen Code findet ihr oben im CSS-Deck. Für Anregungen und Kritik bin ich jederzeit dankbar.
Leave a Reply