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 (Firefox et Edge par exemple), 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 initialeauto
Applicabilitétous les éléments
Héritéenon
Médiatous
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniqueselon la grammaire

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.
number-input   Firefox  
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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simple
Expérimentale
Chrome Support partiel 1
Préfixée
Support partiel 1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support partiel 12
Préfixée
Support partiel 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Support partiel 1
Préfixée
Support partiel 1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Support partiel 62
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée From version 62: this feature is behind the layout.css.webkit-appearance.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support partiel 15
Préfixée
Support partiel 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari Support partiel 3
Préfixée
Support partiel 3
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support partiel 1
Préfixée
Support partiel 1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support partiel 18
Préfixée
Support partiel 18
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Mobile Support partiel 12
Préfixée
Support partiel 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Android Support partiel 4
Préfixée
Support partiel 4
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Support partiel 62
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée From version 62: this feature is behind the layout.css.webkit-appearance.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support partiel 14
Préfixée
Support partiel 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari iOS Support partiel 3
Préfixée
Support partiel 3
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android Support partiel 4.0
Préfixée
Support partiel 4.0
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
none
Expérimentale
Chrome Support complet 1Edge Support complet 12Firefox Support complet 54
Support complet 54
Support partiel 1
Notes
Notes Doesn’t work with <input type="checkbox"> and <input type="radio">.
IE Aucun support NonOpera Support complet 15Safari Support complet 3WebView Android Support complet 1Chrome Android Support complet 18Edge Mobile Support complet 12Firefox Android Support partiel 4
Notes
Support partiel 4
Notes
Notes Doesn’t work with <input type="checkbox"> and <input type="radio">.
Opera Android Support complet 14Safari iOS Support complet 3Samsung Internet Android Support complet 4.0
auto
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Support partiel  
Support partiel
Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

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