Aussehen - CSS-Tricks | CSS-Almanach 2025

Die appearanceEigenschaft wird verwendet, um ein Element in einem plattformeigenen Stil anzuzeigen, der auf dem Thema des Betriebssystems des Benutzers basiert.

.thing ( -webkit-appearance: value; -moz-appearance: value; appearance: value; )

Dies beginnt unfixiert zu werden, was großartig ist, da die browserübergreifende Geschichte hier sehr kompliziert ist.

Die appearanceEigenschaft wird aus einem von zwei Gründen verwendet:

So wenden Sie plattformspezifisches Styling auf ein Element an, das es standardmäßig nicht hat
So entfernen Sie plattformspezifisches Styling für ein Element, das es standardmäßig enthält

Beispielsweise haben Eingaben mit einem type=searchin WebKit-Browsern standardmäßig abgerundete Ecken und sind sehr streng in dem, was Sie über CSS ändern können. Wenn Sie dieses Styling nicht möchten, können Sie es auf einen Schlag mit dem Aussehen entfernen.

input(type=search) ( -webkit-appearance: none; )

Oder Sie nehmen eine Eingabe mit type = text und lassen sie einfach wie eine Sucheingabe aussehen:

input(type=text) ( -webkit-appearance: searchfield; )

WebKit-Werte

Kontrollkästchen
Radio
Druckknopf
quadratischer Knopf
Taste
Knopfschräge
Listbox
Listenpunkt
Menulist
Menulist-Taste
Menulist-Text
Menulist-Textfeld
Bildlaufleiste
Bildlaufleiste nach unten
Bildlaufleiste-Taste-links
Bildlaufleistebutton rechts
scrollbartrack-horizontal
scrollbartrack-vertikal
scrollbarthumb-horizontal
scrollbarthumb-vertikal
Scrollbargripper-horizontal
Scrollbargripper-vertikal
Schieberegler horizontal
Schieberegler vertikal
Sliderthumb-horizontal
Sliderthumb-Vertikal
Caret
Suchfeld
Suchfelddekoration
Suchfeld-Ergebnis-Dekoration
Suchfeld-Ergebnis-Schaltfläche
Suchfeld-Abbrechen-Schaltfläche
Textfeld
Textbereich

Mozilla-Werte

keiner
Taste
Kontrollkästchen
Checkbox-Container
Kontrollkästchen klein
Dialog
Listbox
menuitem
Menulist
Menulist-Taste
Menulist-Textfeld
menupopup
Fortschrittsanzeige
Radio
Funkbehälter
Radio-klein
Resizer
Scrollleiste
Bildlaufleiste nach unten
Bildlaufleiste-Taste-links
Bildlaufleistebutton rechts
Bildlaufleiste
scrollbartrack-horizontal
scrollbartrack-vertikal
Separator
Statusleiste
Tab
Tab-Left-Edge Veraltet
Tabpanels
Textfeld
Textfeld mehrzeilig
Symbolleiste
Symbolleistenschaltfläche
Werkzeugkasten
-moz-mac-unified-toolbar
-moz-win-borderless-glass
-moz-win-browserertabbar-toolbox
-moz-win-Communications-Toolbox
-moz-win-glass
-moz-win-media-toolbox
Tooltip
Baumheadercell
Baumheaderortarrow
treeitem
Baumkronen
treetwistyopen
Baumsicht
Fenster

Ressourcen

Mozilla Docs für -moz-Aussehen
Trent Walton über das Erscheinungsbild des Webkits
Shaun Inman über das Deaktivieren des inneren Textschattens von Texteingaben auf dem iPad
CSS3 Spec

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.