La appearancepropriété est utilisée pour afficher un élément à l'aide d'un style natif de la plate-forme basé sur le thème du système d'exploitation des utilisateurs.
.thing ( -webkit-appearance: value; -moz-appearance: value; appearance: value; )Cela commence à être sans préfixe, ce qui est génial car l'histoire entre navigateurs est ici très compliquée.
La appearancepropriété est utilisée pour l'une des deux raisons suivantes:
- Pour appliquer un style spécifique à la plate-forme à un élément qui ne l'a pas par défaut
- Pour supprimer le style spécifique à la plate-forme d'un élément qui l'a par défaut
Par exemple, les entrées avec un type=searchdans les navigateurs WebKit par défaut ont des coins arrondis et sont très strictes dans ce que vous pouvez modifier via CSS. Si vous ne voulez pas ce style, vous pouvez le supprimer d'un seul coup avec l'apparence.
input(type=search) ( -webkit-appearance: none; )Ou vous pouvez prendre une entrée avec type = text et la faire ressembler à une entrée de recherche:
input(type=text) ( -webkit-appearance: searchfield; )Valeurs WebKit
- case à cocher
- radio
- bouton
- bouton carré
- bouton
- bouton-biseau
- listbox
- listitem
- ménuliste
- bouton-menulist
- texte-menuliste
- menulist-textfield
- barre de défilement
- barre de défilement bouton vers le bas
- barre de défilement bouton-gauche
- barre de défilement bouton-droite
- scrollbartrack-horizontal
- scrollbartrack-vertical
- scrollbarthumb-horizontal
- scrollbarthumb-vertical
- scrollbargripper-horizontal
- scrollbargripper-vertical
- curseur horizontal
- curseur-vertical
- glissement horizontal
- sliderthumb-vertical
- caret
- champ de recherche
- décoration de champ de recherche
- searchfield-results-decoration
- searchfield-results-button
- bouton d'annulation de champ de recherche
- champ de texte
- textarea
Les valeurs de Mozilla
- rien
- bouton
- case à cocher
- case à cocher-conteneur
- case à cocher petite
- dialogue
- listbox
- élément du menu
- ménuliste
- bouton-menulist
- menulist-textfield
- menupopup
- barre de progression
- radio
- radio-conteneur
- radio-petite
- redimensionner
- barre de défilement
- barre de défilement bouton vers le bas
- barre de défilement bouton-gauche
- barre de défilement bouton-droite
- barre de défilement
- scrollbartrack-horizontal
- scrollbartrack-vertical
- séparateur
- barre d'état
- languette
- tab-left-edge Obsolète
- tabpanels
- champ de texte
- textfield-multiligne
- barre d'outils
- bouton de la barre d'outils
- boîte à outils
- -moz-mac-unified-toolbar
- -moz-win-borderless-glass
- -moz-win-browserabbar-toolbox
- -moz-win-communications-toolbox
- -moz-win-glass
- -moz-win-media-toolbox
- info-bulle
- arbre
- arbre à feuilles
- arbre
- treetwisty
- treetwistyopen
- arborescence
- la fenêtre
Ressources
- Mozilla Docs pour -moz-apparence
- Trent Walton sur l'apparence de Webkit
- Shaun Inman sur la désactivation de l'ombre de texte intérieure des entrées de texte sur iPad
- Spécification CSS3
Prise en charge du navigateur
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 83 * | 80 | Non | 83 * | TP * |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 | 85 * | 81 * | 14,0-14,4 * |