De appearanceeigenschap wordt gebruikt om een element weer te geven met behulp van een platform-native stijl op basis van het thema van het besturingssysteem van de gebruiker.
.thing ( -webkit-appearance: value; -moz-appearance: value; appearance: value; )Dit begint onbevooroordeeld te worden, wat geweldig is omdat het cross-browser-verhaal hier erg ingewikkeld is.
De appearanceeigenschap wordt om een van de volgende twee redenen gebruikt:
- Om een platformspecifieke stijl toe te passen op een element dat dit standaard niet heeft
- Om platformspecifieke stijl te verwijderen van een element dat deze standaard wel heeft
Invoer met een type=searchin WebKit-browsers heeft bijvoorbeeld standaard afgeronde hoeken en is erg strikt in wat u via CSS kunt wijzigen. Als je die styling niet wilt, kun je deze in één klap met uiterlijk verwijderen.
input(type=search) ( -webkit-appearance: none; )Of je kunt een invoer nemen met type = text en het gewoon laten lijken op een zoekinvoer:
input(type=text) ( -webkit-appearance: searchfield; )WebKit-waarden
- selectievakje
- radio-
- druk op de knop
- vierkante knop
- knop
- knoop-afschuining
- keuzelijst
- lijstitem
- menulist
- menulist-knop
- menulist-tekst
- menulist-textfield
- schuifbalkknop omhoog
- schuifbalkknop omlaag
- schuifbalkknop-links
- schuifbalkknop-rechts
- scrollbartrack-horizontaal
- scrollbartrack-verticaal
- scrollbarthumb-horizontaal
- scrollbarthumb-verticaal
- scrollbargripper-horizontaal
- scrollbargripper-verticaal
- slider-horizontaal
- schuifregelaar-verticaal
- sliderthumb-horizontaal
- sliderthumb-verticaal
- dakje
- zoekveld
- zoekveld-decoratie
- zoekveld-resultaten-decoratie
- zoekveld-resultaten-knop
- zoekveld-annuleren-knop
- tekstveld
- textarea
Mozilla-waarden
- geen
- knop
- selectievakje
- checkbox-container
- checkbox-klein
- dialoog
- keuzelijst
- menu onderdeel
- menulist
- menulist-knop
- menulist-textfield
- menupopup
- voortgangsbalk
- radio-
- radio-container
- radio-klein
- resizer
- schuifbalk
- schuifbalkknop omlaag
- schuifbalkknop-links
- schuifbalkknop-rechts
- schuifbalkknop omhoog
- scrollbartrack-horizontaal
- scrollbartrack-verticaal
- scheidingsteken
- Statusbalk
- tabblad
- tab-left-edge Verouderd
- tabbladen
- tekstveld
- textfield-multiline
- werkbalk
- werkbalkknop
- gereedschapskist
- -moz-mac-unified-werkbalk
- -moz-win-randloos-glas
- -moz-win-browsertabbar-toolbox
- -moz-win-communicatie-toolbox
- -moz-win-glas
- -moz-win-media-toolbox
- tooltip
- boomheadercel
- treeheadersortarrow
- boomitem
- treetwisty
- treetwistyopen
- boom zicht
- venster
Middelen
- Mozilla Docs voor -moz-uiterlijk
- Trent Walton op Webkit Appearance
- Shaun Inman over het uitschakelen van de innerlijke tekstschaduw van tekstinvoer op de iPad
- CSS3 Spec
Browser-ondersteuning
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 83 * | 80 | Nee | 83 * | TP * |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 * | 81 * | 14.0-14.4 * |