Den appearanceegenskapen brukes til å vise et element ved hjelp av en plattform-innfødte styling basert på brukernes operativsystem tema.
.thing ( -webkit-appearance: value; -moz-appearance: value; appearance: value; )Dette begynner å være uprefiksert, noe som er flott fordi historien over nettlesere her er veldig komplisert.
Den appearanceegenskapen brukes for en av to grunner:
- Å bruke plattformspesifikk styling til et element som ikke har det som standard
- For å fjerne plattformspesifikk styling til et element som har det som standard
For eksempel har innganger med a type=searchi WebKit-nettlesere som standard avrundede hjørner og er veldig strenge i hva du kan endre via CSS. Hvis du ikke vil ha den stylingen, kan du fjerne den på en gang med utseendet.
input(type=search) ( -webkit-appearance: none; )Eller du kan ta en inngang med type = tekst og bare få den til å se ut som en søkeinngang:
input(type=text) ( -webkit-appearance: searchfield; )WebKit-verdier
- avkrysningsruten
- radio
- trykknapp
- firkant-knapp
- knapp
- skråkant
- listeboks
- listitem
- menylist
- menyliste-knapp
- menylist-tekst
- menylist-tekstfelt
- bla opp-knappen
- bla ned-knappen
- rulleknapp-venstre
- rulleknapp-høyre
- scrollbartrack-horizontal
- scrollbartrack-vertikal
- scrollbarthumb-horisontal
- scrollbarthumb-vertikal
- scrollbargripper-horisontal
- scrollbargripper-vertikal
- skyve-horisontal
- skyve-vertikal
- skyvehode-horisontal
- skyvehode-vertikal
- vaktmester
- søkefelt
- søkefelt-dekorasjon
- søkefelt-resultat-dekorasjon
- søkefelt-resultat-knapp
- søkefelt-avbryt-knapp
- tekstfelt
- tekstområde
Mozilla verdier
- ingen
- knapp
- avkrysningsruten
- avkrysningsrute-container
- avkrysningsrute-liten
- dialog
- listeboks
- menuitem
- menylist
- menyliste-knapp
- menylist-tekstfelt
- menupopup
- fremdriftslinje
- radio
- radio-container
- radio-liten
- resizer
- rullefelt
- bla ned-knappen
- rulleknapp-venstre
- rulleknapp-høyre
- bla opp-knappen
- scrollbartrack-horizontal
- scrollbartrack-vertikal
- separator
- statuslinjen
- kategorien
- tab-left-edge foreldet
- tabpaneler
- tekstfelt
- tekstfelt-flerlinje
- verktøylinje
- verktøylinjeknapp
- verktøykasse
- -moz-mac-unified-toolbar
- -moz-vinn-borderless-glass
- -moz-vinn-browsertabbar-verktøykasse
- -moz-vinn-kommunikasjon-verktøykasse
- -moz-vinn-glass
- -moz-vinn-media-verktøykasse
- verktøytips
- trehodercelle
- treeheadersortarrow
- treeitem
- treetwisty
- treetwistyopen
- tre utsikt
- vindu
Ressurser
- Mozilla Docs for -moz-utseende
- Trent Walton på Webkit Utseende
- Shaun Inman om deaktivering av indre tekstskygge av tekstinnganger på iPad
- CSS3 spesifikasjon
Nettleserstøtte
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 83 * | 80 | Nei | 83 * | TP * |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 * | 81 * | 14,0-14,4 * |