Non standard
Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété -moz-appearance est utilisée dans Gecko (Firefox) afin d'afficher un élément en utilisant la mise en forme native du système d'exploitation.

La propriété -webkit-appearance est utilisée dans les navigateurs basés sur WebKit (c'est-à-dire Safari) et sur Blink (c'est-à-dire Chrome ou Opera) et permet d'avoir la même fonctionnalités. On notera que plusieurs navigateurs, non basés sur WebKit, prennent en charge ce préfixe pour des raisons de compatibilité web.

Cette propriété est souvent utilisée dans les feuilles de style XUL afin de mettre en forme des widgets utilisant la mise en forme de la plateforme utilisée. Elle est également utilisée dans les implémentations XBL pour les widgets livrés avec les logiciels Mozilla.

Note : Cette propriété doit être utilisée avec beaucoup d'attention sur les sites Web. Non seulement, cette propriété n'est pas standard mais son comportement peut varier d'un navigateur à l'autre bien que ces variations aient réduit avec le temps. Le mot-clé none peut avoir un comportement différent d'une plateforme à une autre et d'autres mots-clés ne sont pas pris en charge.

Valeur initialenone (cette valeur est surchargée par le CSS de l'agent utilisateur)
Applicabilitétous les éléments
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/*  Liste partielle des valeurs disponibles dans Gecko */
-moz-appearance: none;
-moz-appearance: button;
-moz-appearance: checkbox;
-moz-appearance: scrollbarbutton-up;

/* Liste partielle des valeurs disponibles dans WebKit/Blink */
-webkit-appearance: none;
-webkit-appearance: button;
-webkit-appearance: checkbox;
-webkit-appearance: scrollbarbutton-up;

Valeurs

<appearance> est l’une des valeurs suivantes :

Valeur Démo Navigateur Description
none Tous La valeur par défaut. Aucune mise en forme spécifique n'est appliquée.
button Firefox Chrome L'élément est dessiné comme un bouton.
button-arrow-down Firefox  
button-arrow-next Firefox  
button-arrow-previous Firefox  
button-arrow-up Firefox  
button-bevel Firefox Chrome  
       
button-focus Firefox  
caret Firefox Chrome  
checkbox Firefox Chrome L'élément est dessiné comme une case à cocher (seule la case à cocher est dessinée).
checkbox-container Firefox L'élément est dessiné comme un conteneur pour une case à cocher ce qui peut inclurre un effet d'« éclairage » sur l'arrière-plan pour certaines plateformes. Le résultat contient normalement un libellé et une case à cocher.
checkbox-label Firefox  
checkmenuitem Firefox  
dualbutton Firefox  
groupbox Firefox  
inner-spin-button   Chrome  
listbox Firefox Chrome  
listitem Firefox Chrome  
media-enter-fullscreen-button   Chrome  
media-exit-fullscreen-button   Chrome  
media-mute-button   Chrome  
media-play-button   Chrome  
media-overlay-play-button   Chrome  
media-toggle-closed-captions-button   Chrome  
media-slider   Chrome  
media-sliderthumb   Chrome  
media-volume-slider-container   Chrome  
media-volume-slider   Chrome  
media-volume-sliderthumb   Chrome  
media-controls-background   Chrome  
media-controls-fullscreen-background   Chrome  
media-current-time-display   Chrome  
media-time-remaining-display   Chrome  
menuarrow Firefox  
menubar Firefox  
menucheckbox Firefox  
menuimage Firefox  
menuitem Firefox L'élément est mis en forme comme un élément de menu et est mis en avant lors du survol.
menuitemtext Firefox  
menulist Firefox Chrome  
menulist-button Firefox Chrome L'élément est mis en forme comme un bouton qui indique qu'une liste de menu peut être ouverte.
menulist-text Firefox Chrome  
menulist-textfield Firefox Chrome L'élément est mis en forme comme le champ texte d'une liste de menu (cette valeur n'est pas implémentée pour Windows).
menupopup Firefox  
menuradio Firefox  
menuseparator Firefox  
meter   Chrome  
meterbar Firefox Apparu avec Firefox 16.
meterchunk Firefox Apparu avec Firefox 16.
progress-bar   Chrome  
progress-bar-value   Chrome  
progressbar Firefox L'élément est mis en forme comme une barre de progression.
progressbar-vertical Firefox  
progresschunk Firefox  
progresschunk-vertical Firefox  
push-button   Chrome  
radio Firefox Chrome L'élément est mis en forme comme un bouton radio (seul le bouton radio est dessiné).
radio-container Firefox L'élément est mis en forme comme un conteneur de bouton radio (ce qui peut entraîner un effet d'éclairage de l'arrière-plan pour certaines plateformes). L'élément contient normalement un libellé et un bouton radio.
radio-label Firefox  
radiomenuitem Firefox  
range Firefox  
range-thumb Firefox  
resizer Firefox  
resizerpanel Firefox  
scale-horizontal Firefox  
scalethumbend Firefox  
scalethumb-horizontal Firefox  
scalethumbstart Firefox  
scalethumbtick Firefox  
scalethumb-vertical Firefox  
scale-vertical Firefox  
scrollbarbutton-down Firefox  
scrollbarbutton-left Firefox  
scrollbarbutton-right Firefox  
scrollbarbutton-up Firefox  
scrollbarthumb-horizontal Firefox  
scrollbarthumb-vertical Firefox  
scrollbartrack-horizontal Firefox  
scrollbartrack-vertical Firefox  
searchfield Firefox Chrome  
searchfield-cancel-button   Chrome  
separator Firefox  
sheet Firefox  
slider-horizontal   Chrome  
slider-vertical   Chrome  
sliderthumb-horizontal   Chrome  
sliderthumb-vertical   Chrome  
spinner Firefox  
spinner-downbutton Firefox  
spinner-textfield Firefox  
spinner-upbutton Firefox  
splitter Firefox  
square-button   Chrome  
statusbar Firefox  
statusbarpanel Firefox  
tab Firefox  
tabpanel Firefox  
tabpanels Firefox  
tab-scroll-arrow-back Firefox  
tab-scroll-arrow-forward Firefox  
textarea   Chrome  
textfield Firefox Chrome  
textfield-multiline Firefox  
toolbar Firefox  
toolbarbutton Firefox  
toolbarbutton-dropdown Firefox  
toolbargripper Firefox  
toolbox Firefox  
tooltip Firefox  
treeheader Firefox  
treeheadercell Firefox  
treeheadersortarrow Firefox  
treeitem Firefox  
treeline Firefox  
treetwisty Firefox  
treetwistyopen Firefox  
treeview Firefox  
-moz-win-borderless-glass Firefox Uniquement pour Windows Vista et les versions ultérieures. Ce style applique l'effet « Aero Glass » sur l'élément, sans bordure.
-moz-win-browsertabbar-toolbox Firefox Uniquement pour Windows Vista et les versions ultérieures. Ce style de boîte à outils est conçu pour être utilisé dans la barre des onglets du navigateur.
-moz-win-communicationstext Firefox  
-moz-win-communications-toolbox Firefox Uniquement pour Windows Vista et les versions ultérieures. Ce style de boîte à outils est conçu pour être utilisé dans des applications de communication et de productivité. La couleur de premier plan utilisée est définiée avec -moz-win-communicationstext.
-moz-win-exclude-glass Firefox Uniquement pour Windows Vista et les versions ultérieures. Ce style permet d'exclure l'effet « Aero Glass » de l'élément.
-moz-win-glass Firefox Uniquement pour Windows Vista et les versions ultérieures. Ce style permet d'appliquer l'effet « Aero Glass » sur l'élément.
-moz-win-mediatext Firefox  
       
-moz-win-media-toolbox Firefox Uniquement pour Windows Vista et les versions ultérieures. Ce style de boîte à outils est conçu pour être utilisé dans des applications qui gèrent des média. La couleur de premier plan utilisée est définie avec -moz-win-mediatext.
-moz-window-button-box Firefox  
-moz-window-button-box-maximized Firefox  
-moz-window-button-close Firefox  
-moz-window-button-maximize Firefox  
-moz-window-button-minimize Firefox  
-moz-window-button-restore Firefox  
-moz-window-frame-bottom Firefox  
-moz-window-frame-left Firefox  
-moz-window-frame-right Firefox  
-moz-window-titlebar Firefox  
-moz-window-titlebar-maximized Firefox  
-apple-pay-button     Uniquement pour iOS et macOS. Disponible dans les documents web à partir de iOS 10.1 et de macOS 10.12.1

Exemples

La règle suivante permet que l'élément ait l'apparence d'un bouton d'une barre d'outils :

.exempleun {
  appearance: toolbarbutton;
  -moz-appearance: toolbarbutton;
  -webkit-appearance: toolbarbutton;
}

Spécifications

Spécification État Commentaires
CSS Basic User Interface Module Level 3
La définition de 'appearance' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple1 -webkit- 12 -webkit- 1 -moz- Non15 -webkit- 3 -webkit-
none112

54

11

Non153
auto Non Non Non Non Non Non
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple1 -webkit- 1 -webkit- 12 -webkit- 4 -moz- 14 -webkit- 3 -webkit- 4.0 -webkit-
none1112411434.0
auto Non Non Non Non Non Non Non

1. Doesn’t work with <input type="checkbox"> and <input type="radio">

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, AymDev, teoli, wakka27, ksad, FredB, Mgjbot, Fredchat, Kyodev
Dernière mise à jour par : SphinxKnight,