Den appearanceegenskab bruges til at vise et element ved hjælp af en platform-indfødt styling baseret på brugernes operativsystemets tema.
.thing ( -webkit-appearance: value; -moz-appearance: value; appearance: value; )Dette begynder at være upræfast, hvilket er fantastisk, fordi historien på tværs af browseren her er meget kompliceret.
Den appearanceegenskab bruges til en af to grunde:
- At anvende platformsspecifik styling på et element, der ikke har det som standard
- For at fjerne platformsspecifik styling til et element, der har det som standard
For eksempel har input med a type=searchi WebKit-browsere som standard afrundede hjørner og er meget strenge i, hvad du kan ændre via CSS. Hvis du ikke vil have den styling, kan du fjerne den på én gang med udseendet.
input(type=search) ( -webkit-appearance: none; )Eller du kan tage et input med type = tekst og bare få det til at ligne et søgeinput:
input(type=text) ( -webkit-appearance: searchfield; )WebKit-værdier
- afkrydsningsfelt
- radio
- trykknap
- firkantet knap
- knap
- knap-skrå
- listeboks
- listitem
- menulist
- menulist-knap
- menulist-tekst
- menulist-tekstfelt
- rullefelt-knappen-op
- rul ned-knappen
- rulleknappens venstre
- rullefelt-højre-højre
- scrollbartrack-vandret
- scrollbartrack-lodret
- scrollbarthumb-vandret
- scrollbarthumb-lodret
- scrollbargripper-vandret
- scrollbargripper-lodret
- skyder-vandret
- skyder-lodret
- skydertommel-vandret
- skydertommel-lodret
- caret
- søgefelt
- søgefelt-dekoration
- søgefelt-resultater-dekoration
- søgefelt-resultater-knap
- søgefelt-annuller-knap
- tekstfelt
- tekstområde
Mozilla-værdier
- ingen
- knap
- afkrydsningsfelt
- afkrydsningsfelt-container
- afkrydsningsfelt-lille
- dialog
- listeboks
- menuitem
- menulist
- menulist-knap
- menulist-tekstfelt
- menupopup
- progressbar
- radio
- radiocontainer
- radio-lille
- resizer
- rullebar
- rul ned-knappen
- rulleknappens venstre
- rullefelt-højre-højre
- rullefelt-knappen-op
- scrollbartrack-vandret
- scrollbartrack-lodret
- separator
- statuslinje
- fanen
- tab-venstre-kant Forældet
- tabpaneler
- tekstfelt
- tekstfelt-multiline
- værktøjslinje
- værktøjslinjeknap
- værktøjskasse
- -moz-mac-unified-værktøjslinje
- -moz-win-borderless-glas
- -moz-win-browsertabbar-værktøjskasse
- -moz-win-kommunikations-værktøjskasse
- -moz-win-glas
- -moz-win-media-værktøjskasse
- værktøjstip
- træhovedcelle
- treeheadersortarrow
- treeitem
- treetwisty
- treetwistyopen
- treeview
- vindue
Ressourcer
- Mozilla Docs til -moz-udseende
- Trent Walton på webkit udseende
- Shaun Inman om deaktivering af indre tekstskygge af tekstindgange på iPad
- CSS3 Spec
Browsersupport
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 83 * | 80 | Ingen | 83 * | TP * |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 * | 81 * | 14,0-14,4 * |