CSS/Eigenschaften/appearance

Browserunterstützung
caniuse.com

Die Eigenschaft appearance (engl. Aussehen, Erscheinung) ermöglicht es, Formularelementen ihr betriebssystemspezifisches Aussehen zu nehmen

Erlaubte Werte

• none (Standardwert), betriebssystemspezifisches Styling bleibt erhalten
• auto: Der Browser wählt je nach Element die passende spezielle Formgebung aus. Wirkt bei Elementen ohne spezielles Styling wie none.
• menulist-button: Bei Dropdown-Box-select-Elementen wird das Element als Dropdown-Box gerendert, einschließlich einer "Dropdown-Schaltfläche", aber nicht unbedingt mit einem nativen Steuerelement des Host-Betriebssystems. Für solche Elemente sollten CSS-Eigenschaften wie color, background-color und border (die für auto außer Acht gelassen werden können) nicht außer Acht gelassen werden.
  Für alle anderen Elemente hat dieser Wert die gleiche Wirkung wie auto.
• textfield: Bei input-Elementen, bei denen das type-Attribut den status search hat, wird das Element als "normales" Texteingabe-Widget dargestellt, ähnlich wie ein Eingabeelement, bei dem das type-Attribut den Status text hat.
  Für alle anderen Elemente hat dieser Wert die gleiche Wirkung wie auto.
• compat-auto: Diese Werte dienen der Kompatibilität von Inhalten, die für frühere, nicht standardisierte Versionen dieser Eigenschaft entwickelt wurden. Sie haben alle die gleiche Wirkung wie auto.
  <compat-auto> = searchfield, textarea, push-button, slider-horizontal, checkbox, radio, square-button, menulist, listbox, meter, progress-bar, button

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

none

anwendbar auf

alle Elemente

Vererbung

ja

animierbar

nein

Beispiel

select { appearance: none; }

Auf

Beachten Sie: Wenn Sie diese Eigenschaft auf Websites verwenden möchten, sollten Sie sie sehr sorgfältig testen. Obwohl sie in den meisten modernen Browsern unterstützt wird, variiert ihre Implementierung. In älteren Browsern hat selbst das Schlüsselwort none nicht in allen Browsern die gleiche Wirkung auf alle Formularelemente, und einige unterstützen es überhaupt nicht. In den neuesten Browsern sind die Unterschiede geringer.

Siehe auch

• Benutzeroberfläche#appearance

Weblinks

• Spezifikation (W3C): appearance CSS Basic User Interface Module Level 4
• MDN: appearance (-moz-appearance, -webkit-appearance)
• css-tricks: appearance
• Details: caniuse.com