CSS/Eigenschaften/appearance

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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
  • Defaultwert: none
anwendbar auf alle Elemente
Browsersupport Details: caniuse.com
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.

Weblinks

Siehe auch