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.
• base-select: schaltet die customizable selects frei,
  zur Zeit (Stand Oktober 2025) nur in Chrome, Edge und Opera
• 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,
::picker(select) {
  appearance: base-select;
}

Mit dem neuen Wert base-select wird das neue select ausgelöst und man kann das Select-Menü nun nach Wunsch stylen.
zur Zeit (Stand Oktober 2025) nur in Chrome, Edge und Opera

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
• Formulare/Auswahllisten customizable selects

Weblinks

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