Utseende - CSS-tricks | CSS Almanack 2025

Det appearanceegenskapen används för att visa en del med hjälp av en plattform-native styling baserat på användarnas operativsystem tema.

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

Detta börjar bli oprefixerat, vilket är jättebra eftersom webbläsarhistorien här är mycket komplicerad.

Det appearanceegenskapen används för en av två skäl:

Att tillämpa plattformsspecifik styling på ett element som inte har det som standard
För att ta bort plattformsspecifik styling till ett element som har det som standard

Till exempel har ingångar med a type=searchi WebKit-webbläsare som standard rundade hörn och är mycket strikta vad du kan ändra via CSS. Om du inte vill ha den stylingen kan du ta bort den i ett slag med utseendet.

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

Eller så kan du ta en inmatning med typ = text och bara få den att se ut som en sökingång:

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

WebKit-värden

kryssruta
radio
tryckknapp
fyrkantig knapp
knapp
knapp-fas
listbox
listobjekt
menylist
menylist-knapp
menylist-text
menylist-textfält
rullningsknapp
rullningsknapp ned
rullningsknapp-vänster
rullningsknapp-höger
scrollbartrack-horizontal
scrollbartrack-vertikalt
scrollbarthumb-horizontal
scrollbarthumb-vertikalt
scrollbargripper-horisontell
scrollbargripper-vertikal
skjutreglage-horisontell
skjutreglage
skjutreglage-horisontell
skjutreglage-vertikal
markör
sökfält
sökfält-dekoration
sökfält-resultat-dekoration
sökfält-resultat-knapp
sökfält-avbryt-knapp
textfält
textarea

Mozilla värden

ingen
knapp
kryssruta
kryssruta-behållare
kryssruta-liten
dialog
listbox
menytem
menylist
menylist-knapp
menylist-textfält
menupopup
framstegsfält
radio
radiocontainer
radio-liten
resizer
rullningslist
rullningsknapp ned
rullningsknapp-vänster
rullningsknapp-höger
rullningsknapp
scrollbartrack-horizontal
scrollbartrack-vertikalt
separator
statusfältet
flik
tab-left-edge Föråldrad
flikpaneler
textfält
textfält-multilinje
verktygsfält
verktygsfältknapp
verktygslåda
-moz-mac-unified-verktygsfält
-moz-win-borderless-glas
-moz-win-browsertabbar-verktygslåda
-moz-win-kommunikation-verktygslåda
-moz-win-glas
-moz-win-media-verktygslåda
verktygstips
trädhuvudcell
treeheadersortarrow
treeitem
treetwisty
treetwistyopen
trädvy
fönster

Resurser

Mozilla Docs för -moz-utseende
Trent Walton på Webkit Utseende
Shaun Inman om att inaktivera inre textskugga av textingångar på iPad
CSS3 Spec

Webbläsarstöd

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.