appearanceLastnost se uporablja za prikaz elementa z uporabo platforme, doma slog, ki temelji na temo uporabnikov operacijskega sistema.
.thing ( -webkit-appearance: value; -moz-appearance: value; appearance: value; )To začenja biti brez predpone, kar je super, ker je zgodba med brskalniki tukaj zelo zapletena.
appearanceLastnost se uporablja za enega od dveh razlogov:
- Če želite uporabiti slog, specifičen za platformo, za element, ki ga privzeto nima
- Če želite odstraniti slog, specifičen za platformo, elementu, ki ga ima privzeto
Na primer, vnosi z type=searchbrskalniki WebKit imajo privzeto zaokrožene vogale in so zelo strogi glede tega, kaj lahko spremenite prek CSS. Če tega stylinga ne želite, ga lahko z videzom odstranite v enem zamahu.
input(type=search) ( -webkit-appearance: none; )Lahko pa vnesete vnos s tipom = besedilo in preprosto naredite, da bo videti kot vnos za iskanje:
input(type=text) ( -webkit-appearance: searchfield; )Vrednosti WebKit
- potrditveno polje
- radio
- pritisni gumb
- kvadratni gumb
- gumb
- gumb-stožec
- seznam
- listitem
- menulist
- gumb za meni
- menulistično besedilo
- menulistično-besedilno polje
- drsni gumb navzgor
- drsni gumb navzdol
- drsni gumb-levo
- drsni gumb-desno
- drsnik-vodoravno
- drsnik-navpično
- drsnik palček-vodoravno
- drsnik palček-navpično
- drsnikrigač-vodoravno
- drsnikrigač navpično
- drsnik-vodoravno
- drsnik-navpično
- drsnik-palec-vodoravno
- drsnik-palec-navpično
- caret
- iskalno polje
- iskalno polje-dekoracija
- iskalno polje-rezultati-dekoracija
- gumb za iskalno polje
- iskalno polje-gumb za preklic
- besedilno polje
- textarea
Vrednosti Mozille
- nobenega
- gumb
- potrditveno polje
- potrditveno polje-vsebnik
- potrditveno polje-majhno
- pogovornem oknu
- seznam
- menuitem
- menulist
- gumb za meni
- menulistično-besedilno polje
- pojavno okno menija
- vrstica napredka
- radio
- radijski zabojnik
- radio-majhen
- resizer
- drsnik
- drsni gumb navzdol
- drsni gumb-levo
- drsni gumb-desno
- drsni gumb navzgor
- drsnik-vodoravno
- drsnik-navpično
- ločilo
- vrstici stanja
- zavihek
- zavihek-levi rob Zastarelo
- tablice
- besedilno polje
- besedilno polje-več vrstic
- orodna vrstica
- gumb orodne vrstice
- orodjarni
- -moz-mac-unified-toolbar
- -moz-win-glass-glass-glass
- -moz-win-browsertabbar-toolbox
- -moz-win-komunikacije-orodje
- -moz-win-glass
- -moz-win-media-toolbox
- opis orodja
- treeheadercell
- drevoglavci ali spredaj
- drevesni element
- treetwisty
- treetwistyopen
- drevesni pogled
- okno
Viri
- Mozilla Docs za -moz-izgled
- Trent Walton o videzu Webkit
- Shaun Inman o onemogočanju notranjega besedila v senci vnosa besedila na iPadu
- CSS3 Spec
Podpora za brskalnik
Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.
Namizje
| Chrome | Firefox | IE | Rob | Safari |
|---|---|---|---|---|
| 83 * | 80 | Ne | 83 * | TP * |
Mobilni / tablični računalnik
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 * | 81 * | 14,0-14,4 * |