CSS appearance

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 eingesetzt.

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

18-12-15 SITEMAP

Eingabefelder in Betriebssystem-Optik

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.

Werte für appearance

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

z.B. macht appearance: radio aus dem typischen kleinen Viereck einer Checkbox einen runden Radio-Button.

.mod {
	-webkit-appearance: radio;
	-moz-appearance: radio;
	appearance: radio;
}

So einmütig wie in diesem Beispiel ist appearance in den verschiedenen Browsern keinesfalls. Verläßlich? Eingeschränkt.

Immerhin können wir Safari die abgerundeten Ecken des Suchfelds abgewöhnen.

input[type="search"] {
	font-size: 22px;
	-webkit-appearance: button;
	border:1px solid gray;
	padding:0.5rem;
}
OK

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
EDGE Check it! Rot Gelb Grün Button PLZ Such mal was Ich bin ein Eingabefeld Safari Check it! Rot Gelb Grün Button PLZ Such mal was Ich bin ein Eingabefeld Safari iPad PLZ Such mal was Ich bin ein Eingabefeld Button Check it! Rot Gelb Grün Android Check it! Rot Grün Blau Button Be my button Ich bin ein Eingabefeld Such mal was PLZ