Išvaizda - CSS-gudrybės | CSS almanachas 2025

appearanceTurtas naudojamas rodyti elementą naudojant platformą gimtoji stilius remiasi gavėjų operacinės sistemos tema.

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

Tai pradeda būti nenustatyta, o tai puiku, nes kryžminio naršyklės istorija čia yra labai sudėtinga.

appearanceTurtas naudojamas vieno iš dviejų priežasčių:

Taikyti konkrečios platformos stilių elementui, kurio pagal numatytuosius nustatymus jo nėra
Norėdami pašalinti konkrečios platformos stilių iš elemento, kuris jį turi pagal numatytuosius nustatymus

Pavyzdžiui, įvestys su type=search„WebKit“ naršyklėmis pagal numatytuosius nustatymus turi suapvalintus kampus ir yra labai griežtos, ką galite pakeisti naudodamiesi CSS. Jei nenorite tokio stiliaus, galite jį pašalinti vienu ypu ir atrodydami.

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

Arba galite pasiimti įvestį su type = text ir tiesiog padaryti ją panašią į paieškos įvestį:

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

„WebKit“ vertės

žymimasis langelis
radijas
mygtukas
kvadratinis mygtukas
mygtuką
sagos kampas
sąrašą
listitem
menulistas
menulistas-mygtukas
menulistas-tekstas
menulistas-teksto laukas
slinkties mygtukas aukštyn
slinkties mygtukas žemyn
slinkties mygtukas kairėn
slinkties mygtukas dešinėje
slinkties juosta horizontaliai
„scrollbartrack-vertical“
slinkties juosta-horizontali
slinkties juosta-vertikali
scrollbargripper-horizontaliai
scrollbargripper-vertikalus
slankiklis-horizontalus
slankiklis-vertikalus
slankusis nykštis-horizontalus
slankusis nykštis-vertikalus
caret
paieškos laukas
paieškos lauko apdaila
paieškos laukas-rezultatai-dekoravimas
paieškos lauko rezultatų mygtukas
paieškos lauko atšaukimo mygtukas
teksto laukas
textarea

„Mozilla“ vertybės

nė vienas
mygtuką
žymimasis langelis
žymės langelis-konteineris
žymimasis laukelis - mažas
dialogo lange
sąrašą
menuitem
menulistas
menulistas-mygtukas
menulistas-teksto laukas
menupopup
progreso juosta
radijas
radijo konteineris
radijas-mažas
keisti dydį
slinkties juosta
slinkties mygtukas žemyn
slinkties mygtukas kairėn
slinkties mygtukas dešinėje
slinkties mygtukas aukštyn
slinkties juosta horizontaliai
„scrollbartrack-vertical“
separatorius
Būsenos juosta
skirtuką
kortelės kairysis kraštas Pasenęs
skirtukai
teksto laukas
textfield-multiline
įrankių juosta
įrankių mygtukas
įrankių dėžutė
-moz-mac-unified-įrankių juosta
-moz-win-borderless-glass
-moz-win-browsertabbar-toolbox
-moz-win-communications-toolbox
-moz-win-glass
-moz-win-media-toolbox
patarimas
treeheadercell
treeheadersortarrow
medis
medžių
medžio atidarytas
treeview
langas

Ištekliai

„Mozilla“ dokumentai, skirti „-moz“ išvaizdai
Trentas Waltonas apie „Webkit“ išvaizdą
Shaun Inman apie vidinio teksto šešėlių išjungimą „iPad“ teksto įvestyse
CSS3 Spec

Naršyklės palaikymas

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.