CSS appearance – Aussehen von Eingabefeldern

appearance : none Browser-CSS entfernen

appearance passt das Erscheinungsbild von Elementen an die nativen Elemente des Betriebssystems an und wird von den Browsern vor allem zur Anpassung von Formularfeldern wie Suche, Checkboxen, Radioboxen, Range-Reglern und Select-Auswahlen eingesetzt.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Eingabefelder in Betriebssystem-Optik

appearance : none befreit die Eingabefelder von Formularen von den Vorlieben der Browser und schafft Raum für eigenes CSS.

appearance wird entweder eingesetzt, um Elemente an ihr Erscheinungsbild der jeweiligen Systemplattform anzupassen oder um den Plattform-Stil von Elementen zu entfernen.

appearance: auto ist die Voreinstellung: So rendern alle Browser auf allen Plattformen die Webseite im selben Stil (na ja, sagen wir mal: so ziemlich …). Die Browser passen mal hier und mal da Elemente der Benutzerschnittstelle an die Optik der Systemplattform an. In erster Linie sind es die Eingabefelder von Formularen, die wie die nativen Felder der Systemplattform aussehen.

CSS für input type="search" widersetzt sich eigenem CSS genauso wie input type="range". Das gilt vor allen auch den kleinen Radio-Buttons, Checkboxen und auch für die Select-Auswahl.

Ohne spezielles CSS
Check it!
input type="color"
Rot Grün Blau
Be my button

Die kleinen Eingabefelder widersprechen den aktuellen Trends des Webdesigns, vor allem aber der komfortablen Nutzung auf mobilen Geräten mit kleinen Touchscreens. Schriftgröße und Breite von Eingabefeldern lassen sich auch ohne appearance:none in allen Browsern mit font-size und width anpassen.

Chrome Formularfelder ohne CSS Safari Formularfelder ohne CSS Firefox Formularfelder ohne CSS
Eingabefelder unter verschiedenen Systemen: Chrome, Safari, Firefox

Wenn Eingabefelder, Slider, Buttons und select-Listen von Formularen mit CSS angepasst werden, geht es weniger darum, in allen Browsern dasselbe Aussehen zu erzielen. Ein Ziel ist eine komfortable Benutzerschnittstelle auf allen Geräten und die konsistente Darstellung aller Elemente.

Werte für appearance

Sowohl Webkit-Browser als auch Mozilla unterstützen jeweils eine lange Liste von Werten für appearance. Sie passen beliebige Elemente an das Aussehen der entsprechenden Elemente des Betriebssystems an.

Formularfelder mit appearance:none

appearance : none bringt Elemente in den Vorgabezustand ohne die Anpassung an die UI-Elemente des Betriebssystems. Bestes Beispiel ist die Anpassung des Range-Sliders oder Schiebereglers auf eine angemessene Größe und konsistentes Aussehen.

Alle modernen Browser (außer IE 11) unterstützen appearance, früher allerdings mit Präfix (Chrome / Microsoft Edge / Safari mit -webkit-Präfix, Firefox mit -moz-). Heute soll der Präfix nicht mehr verwendet werden.

Checkboxen und Radiobuttons

Das Vergrößern der kleinen Formularelemente ist ein Hauptanliegen bei der Anwendung von appearance none.

input[type="checkbox"] {
   appearance: none;
   width: 30px; 
   height: 30px; 
   background: silver; 
   border-radius: 6px;
}

input[type=checkbox]:checked {
   background: gray;
   background-image: url(haekchen.png);
}

appearance none entfernt alle Browser-eigenen Stile der Checkbox – dazu gehört auch das Markieren der Checkbox als checked. Die Folge ist, dass Webkit-Browser kein Häckchen oder einen anderen Hinweis darauf zeigen, dass die Checkbox aktiviert wurde.

Darum muss auf jeden Fall noch ein Stil für die aktivierte Checkbox ( input [type=checkbox] : checked ) eingesetzt werden.

CSS für select

Eine größere Schrift und ein größerer Klickbereich für kleine Monitore verbessern den Benutzerkomfort und möbeln die – ach so verstaubten – select-Felder auf.

Das CSS als Ersatz für die Select-Box ist schon fast ein epischer Roman.

.select-wrap {
  display: inline-block;
  position: relative;
}

.select-wrap select {
  appearance: none;
  background: lightslategray;
  border-radius: 0;
  font-size: 1.2em;
  padding: 0.25em 2em 0.25em 1em;
  color: white
}

.select-wrap:after {
  content: '▾';
  position: absolute;
  font-size: 150%;
  right: 7px;
  top: 10%;
  pointer-event:none;
  color: white;
}