Megjelenés - CSS-trükkök | CSS Almanach 2025

A appearancetulajdonság egy elem megjelenítésére szolgál, platform-natív stílus használatával, a felhasználói operációs rendszer témája alapján.

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

Ez kezd előre nem javítani, ami nagyszerű, mert a böngészők közötti történet itt nagyon bonyolult.

Az appearanceingatlant két okból használják:

Platformspecifikus stílus alkalmazása olyan elemre, amely alapértelmezés szerint nem rendelkezik ezzel
Platformspecifikus stílus eltávolítása olyan elemről, amelyik alapértelmezés szerint rendelkezik

Például type=searcha WebKit böngészőben alapértelmezés szerint a bemenetek lekerekített sarkokkal rendelkeznek, és nagyon szigorúak abban, hogy mit változtathatnak a CSS-en keresztül. Ha nem akarja ezt a stílust, akkor egy csapásra eltávolíthatja a megjelenést.

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

Vagy felvehet egy type = text bevitelt, és csak úgy néz ki, mint egy keresési bevitel:

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

WebKit értékek

jelölőnégyzetet
rádió
nyomógomb
négyzetgomb
gomb
gombos ferde
listbox
listaelem
menulista
menulist-gomb
menulista-szöveg
menulist-textfield
görgetõgomb-fel
görgetõgomb lefelé
görgetõgomb-balra
görgetõgomb jobbra
scrollbartrack-horizontal
scrollbartrack-vertical
görgetősarok-vízszintes
scrollbarthumb-függőleges
scrollbargripper-vízszintes
scrollbargripper-függőleges
csúszka-vízszintes
csúszó-függőleges
csúszka-vízszintes
csúszóhüvely függőleges
hiányjel
keresőmező
keresőmező-díszítés
keresőmező-eredmények-dekoráció
keresési mező-eredmények gomb
keresőmező-törlés gomb
textfield
textarea

Mozilla értékek

egyik sem
gomb
jelölőnégyzetet
jelölőnégyzet-konténer
jelölőnégyzet-kicsi
párbeszéd
listbox
menü tétel
menulista
menulist-gomb
menulist-textfield
menupopup
fejlődésmutató
rádió
rádiótartály
rádió-kicsi
átméretezés
görgetősáv
görgetõgomb lefelé
görgetõgomb-balra
görgetõgomb jobbra
görgetõgomb-fel
scrollbartrack-horizontal
scrollbartrack-vertical
szétválasztó
állapotsor
fülre
fül-bal szél Elavult
tabpanelek
textfield
textfield-multiiline
eszköztár
szerszámgomb
Eszköztár
-moz-mac-unified-eszközsor
-moz-win-borderless-glass
-moz-win-browsertabbar-toolbox
-moz-win-communications-toolbox
-moz-win-glass
-moz-win-media-toolbox
eszköztipp
treeheadercell
treeheadersortarrow
treeitem
fásvizes
treetwistyopen
fanézet
ablak

Erőforrások

Mozilla Docs a -moz-megjelenéshez
Trent Walton a Webkit megjelenésről
Shaun Inman a szövegbevitel belső árnyékának letiltásáról az iPad-en
CSS3 Spec

Böngésző támogatás

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.