CSS/Eigenschaften/Anzeige/appearance

Die Eigenschaft appearance (engl. Aussehen, Erscheinung) sollte es ursprünglich ermöglichen, Formularelementen ihr betriebssystemspezifisches Aussehen zu nehmen.

• 
• 
• 
• 
• 
• 

Details: caniuse.com

Achtung!

Für diese Eigenschaft gibt es einander widersprechende Umsetzungen.

Verhalten gemäß (geplanter) Spezifikation

In der Spezifikation (CSS Basic User Interface Module Level 4) gibt es folgerichtig auch nur zwei Werte, auto und none.

Beispiel ansehen …

button {
    display: block;
    margin: .5em 1em;
}
button.none {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

<h2>appearance: none;</h2>
<form>
     <button class="none">Ich bin ein Button, darf aber nicht so aussehen.</button>
     <button class="none">Button</button>
</form>

ansehen …

Erlaubt sind folgende Werte:

• auto, (Standardwert) das Element wird wie ein Bedienelement des Browsers dargestellt
• none, das browsertypische Verhalten wird entfernt

Erweiterungen

Einige Browserhersteller haben Erweiterungen an der Spezifikation vorgenommen, sodass jetzt auch beliebige Elemente wie Formularelemente aussehen können. Aus Gründen der Zugänglichkeit ist dies nicht unproblematisch, etwa wenn vergessen wird, auf die Tastaturbedienung zu achten.

Es wurde eine Vielzahl von zusätzlichen Werten definiert. Nun steht im Vordergrund, beliebigen Elementen das Aussehen von Formularelementen zu geben, deshalb ist der Wert auto nicht sinnvoll, der Defaultwert ist folgerichtig none. Man sieht also, dass sich die geplante Spezifikation und die Bestrebungen der Browserhersteller hier widersprechen.

• 
• 
• 
• 
• 
• 

Details: caniuse.com

Beispiel ansehen …

a {
    -moz-appearance: button;
    -webkit-appearance: button;
    appearance: button;
}

<a href="#">Ich bin ein Link und sehe wie ein Button aus.</a>

ansehen …

Erlaubt sind unter anderem folgende Werte:

• none, (Standardwert) das Element wird wie gewohnt dargestellt, entspricht auto in der Spezifikation
• button, das Element wird wie ein Button dargestellt
• checkbox, das Element wird wie eine Checkbox dargestellt
• listitem, das Element wird wie ein Listenelement dargestellt
• radio, das Element wird wie ein Radio-Button dargestellt

Eine vollständige Liste finden Sie unter https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance.

Achtung!

Die Eigenschaft appearance ist derzeit (Stand: Dezember 2016) noch nicht in alle aktuellen Browser implementiert, deshalb muss man proprietäre Eigenschaften verwenden:

für Firefox	-moz-appearance
für Chrome, Opera, Safari	-webkit-appearance
für Android-Browser	-webkit-appearance

Details: caniuse.com

Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.

Beachten Sie: Auch Microsoft Edge unterstützt die -webkit-Variante.

Siehe auch

• Buttons mit CSS gestalten

Weblinks

• css-tricks.com: appearance