CSS appearance

appearance : none (Erscheinungsbild) entfernt das Aussehen von Reglern (range) Buttons, Checkboxen, Radiobutton und Select Superman CSS vs simple HTML

appearance passt das Erscheinungsbild von Elementen an die nativen Elemente des Betriebssystems an und wird von den Browsern vor allem zur Anpassung von Formularfeldern eingesetzt.

Wenn sich Formularelemente von CSS nur wenig oder gar nicht beeindrucken lassen, befreit appearance : none die Elemente von den Vorlieben der Browser.

appearance: none ist die Voreinstellung, aber die Browser passen mal hier und mal da Elemente der Benutzerschnittstelle an die Optik des Betriebssystems an. In erster Linie sind es die Eingabefelder von Formularen, die sich Anpassungen durch CSS verweitern.

Ohne spezielles CSS
Check it!
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.

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.

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.

appearance war schon in CSS3 Basic User Interface Module W3C Candidate Recommendation 11 May 2004 geplant, hat es aber nicht zum Standard gebracht. Jetzt steht appearance für CSS4 auf dem Plan. Alle modernen Browser außer IE 11 unterstützen appearance, allerdings nur mit Präfix (Microsoft Edge mit -webkit-Präfix).

Checkboxen und Radiobuttons

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

input[type="checkbox"] {
   -webkit-appearance: none;
   -moz-appearance: none;
   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 kleiner 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;
}

Browser-Support für appearance

Browser-Unterstützung gibt es – wenn überhaupt – nur mit Vendor-Präfix.

-webkit-appearance
-moz-appearance

appearance: none ist die einzige zuverlässige (?) Option.

css appearance PLZ Such mal was Ich bin ein Eingabefeld Button Check it! Rot Gelb Grün Check it! Rot Gelb Grün Check it! Rot Gelb Grün Button EDGE Safari Safari iPad Button