-moz-appearance (-webkit-appearance, appearance)

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 initiale	`auto`
Applicabilité	tous les éléments
Héritée	non
Média	tous
Valeur calculée	comme spécifié
Type d'animation	discrète
Ordre canonique	selon 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`	div {-moz-appearance: none; -webkit-appearance: none; color: black;} <div>Lorem</div>	Tous	La valeur par défaut. Aucune mise en forme spécifique n'est appliquée.
`button`	div {-moz-appearance: button; -webkit-appearance: button; color: black; } <div>Lorem</div>	Firefox Chrome	L'élément est dessiné comme un bouton.
`button-arrow-down`	div {-moz-appearance: button-arrow-down; -webkit-appearance: button-arrow-down; color: black; } <div>Lorem</div>	Firefox
`button-arrow-next`	div {-moz-appearance: button-arrow-next; -webkit-appearance: button-arrow-next; color: black; } <div>Lorem</div>	Firefox
`button-arrow-previous`	div {-moz-appearance: button-arrow-previous; -webkit-appearance: button-arrow-previous; color: black; } <div>Lorem</div>	Firefox
`button-arrow-up`	div {-moz-appearance: button-arrow-up; -webkit-appearance: button-arrow-up; color: black; } <div>Lorem</div>	Firefox
`button-bevel`	div {-moz-appearance: button-bevel; -webkit-appearance: button-bevel; color: black; } <div>Lorem</div>	Firefox Chrome

`button-focus`	div {-moz-appearance: button-focus; -webkit-appearance: button-focus; color: black; } <div>Lorem</div>	Firefox
`caret`	div {-moz-appearance: caret; -webkit-appearance: caret; color: black; } <div>Lorem</div>	Firefox Chrome
`checkbox`	div {-moz-appearance: checkbox; -webkit-appearance: checkbox; color: black; } <div>Lorem</div>	Firefox Chrome	L'élément est dessiné comme une case à cocher (seule la case à cocher est dessinée).
`checkbox-container`	div {-moz-appearance: checkbox-container; -webkit-appearance: checkbox-container; color: black; } <div>Lorem</div>	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`	div {-moz-appearance: checkbox-label; -webkit-appearance: checkbox-label; color: black; } <div>Lorem</div>	Firefox
`checkmenuitem`	div {-moz-appearance: checkmenuitem; -webkit-appearance: checkmenuitem; height: 20px; color: black; } <div>Lorem</div>	Firefox
`dualbutton`	div {-moz-appearance: dualbutton; -webkit-appearance: dualbutton; color: black; } <div>Lorem</div>	Firefox
`groupbox`	div {-moz-appearance: groupbox; -webkit-appearance: groupbox; color: black; } <div>Lorem</div>	Firefox
`inner-spin-button`		Chrome
`listbox`	div {-moz-appearance: listbox; -webkit-appearance: listbox; height:20px; color: black; } <div>Lorem</div>	Firefox Chrome
`listitem`	div {-moz-appearance: listitem; -webkit-appearance: listitem; color: black; } <div>Lorem</div>	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`	div {-moz-appearance: menuarrow; -webkit-appearance: menuarrow; color: black; } <div>Lorem</div>	Firefox
`menubar`	div {-moz-appearance: menubar; -webkit-appearance: menubar; color: balck; } <div>Lorem</div>	Firefox
`menucheckbox`	div {-moz-appearance: menucheckbox; -webkit-appearance: menucheckbox; color: black; } <div>Lorem</div>	Firefox
`menuimage`	div {-moz-appearance: menuimage; -webkit-appearance: menuimage; color: black; } <div>Lorem</div>	Firefox
`menuitem`	div {-moz-appearance: menuitem; -webkit-appearance: menuitem; color: black; } <div>Lorem</div>	Firefox	L'élément est mis en forme comme un élément de menu et est mis en avant lors du survol.
`menuitemtext`	div {-moz-appearance: menuitemtext; -webkit-appearance: menuitemtext; color: black; } <div>Lorem</div>	Firefox
`menulist`	div {-moz-appearance: menulist; -webkit-appearance: menulist; color: black; } <div>Lorem</div>	Firefox Chrome
`menulist-button`	div {-moz-appearance: menulist-button; -webkit-appearance: menulist-button; color: black; } <div>Lorem</div>	Firefox Chrome	L'élément est mis en forme comme un bouton qui indique qu'une liste de menu peut être ouverte.
`menulist-text`	div {-moz-appearance: menulist-text; -webkit-appearance: menulist-text; color: black; } <div>Lorem</div>	Firefox Chrome
`menulist-textfield`	div {-moz-appearance: menulist-textfield; -webkit-appearance: menulist-textfield; color: black; } <div>Lorem</div>	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`	div {-moz-appearance: menupopup; -webkit-appearance: menupopup; color: black; } <div>Lorem</div>	Firefox
`menuradio`	div {-moz-appearance: menuradio; -webkit-appearance: menuradio; color: black; } <div>Lorem</div>	Firefox
`menuseparator`	div {-moz-appearance: menuseparator; -webkit-appearance: menuseparator; color: transparent; } <div>Lorem</div>	Firefox
`meter`		Chrome
`meterbar`	div {-moz-appearance: meterbar; -webkit-appearance: meterbar; color: black; } <div>Lorem</div>	Firefox	Apparu avec Firefox 16.
`meterchunk`	div {-moz-appearance: meterchunk; -webkit-appearance: meterchunk; color: black; } <div>Lorem</div>	Firefox	Apparu avec Firefox 16.
`number-input`		Firefox
`progress-bar`		Chrome
`progress-bar-value`		Chrome
`progressbar`	div {-moz-appearance: progressbar; -webkit-appearance: progressbar; color: black; } <div>Lorem</div>	Firefox	L'élément est mis en forme comme une barre de progression.
`progressbar-vertical`	div {-moz-appearance: progressbar-vertical; -webkit-appearance: preogressbar-vertical; color: transparent; } <div>Lorem</div>	Firefox
`progresschunk`	div {-moz-appearance: progresschunk; -webkit-appearance: progresschunk; color: black; } <div>Lorem</div>	Firefox
`progresschunk-vertical`	div {-moz-appearance: progresschunk-vertical; -webkit-appearance: progresschunk-vertical; color: black; } <div>Lorem</div>	Firefox
`push-button`		Chrome
`radio`	div {-moz-appearance: radio; -webkit-appearance: radio; color: black; } <div>Lorem</div>	Firefox Chrome	L'élément est mis en forme comme un bouton radio (seul le bouton radio est dessiné).
`radio-container`	div {-moz-appearance: radio-container; -webkit-appearance: radio-container; color: black; } <div>Lorem</div>	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`	div {-moz-appearance: radio-label; -webkit-appearance: radio-label; color: black; } <div>Lorem</div>	Firefox
`radiomenuitem`	div {-moz-appearance: radiomenuitem; -webkit-appearance: radiomenuitem; color: black; } <div>Lorem</div>	Firefox
range	div {-moz-appearance: range; -webkit-appearance: radiomenuitem; color: black; } range <div>Lorem</div>	Firefox
range-thumb	div {-moz-appearance: range-thumb; -webkit-appearance: range-thumb; color: black; } <div>Lorem</div>	Firefox
`resizer`	div {-moz-appearance: resizer; -webkit-appearance: resizer; color: transparent; } <div>Lorem</div>	Firefox
`resizerpanel`	div {-moz-appearance: resizerpanel; -webkit-appearance: resizerpanel; color: black; } <div>Lorem</div>	Firefox
`scale-horizontal`	div {-moz-appearance: scale-horizontal; -webkit-appearance: scale-horizontal; color: transparent; } <div>Lorem</div>	Firefox
`scalethumbend`	div {-moz-appearance: scalethumbend; -webkit-appearance: scalethumbend; color: black; } <div>Lorem</div>	Firefox
`scalethumb-horizontal`	div {-moz-appearance: scalethumb-horizontal; -webkit-appearance: scalethumb-horizontal; color: transparent; } <div>Lorem</div>	Firefox
`scalethumbstart`	div {-moz-appearance: scalethumbstart; -webkit-appearance: scalethumbstart; color: black; } <div>Lorem</div>	Firefox
`scalethumbtick`	div {-moz-appearance: scalethumbtick; -webkit-appearance: scalethumbtick; color: black; } <div>Lorem</div>	Firefox
`scalethumb-vertical`	div {-moz-appearance: scalethumb-vertical; -webkit-appearance: scalethumb-vertical; color: black; } <div>Lorem</div>	Firefox
`scale-vertical`	div {-moz-appearance: scale-vertical; -webkit-appearance: scale-vertical; color: transparent; } <div>Lorem</div>	Firefox
`scrollbarbutton-down`	div {-moz-appearance: scrollbarbutton-down; -webkit-appearance: scrollbarbutton-down; color: black; } <div>Lorem</div>	Firefox
`scrollbarbutton-left`	div {-moz-appearance: scrollbarbutton-left; -webkit-appearance: scrollbarbutton-left; color: black; } <div>Lorem</div>	Firefox
`scrollbarbutton-right`	div {-moz-appearance: scrollbarbutton-right; -webkit-appearance: scrollbarbutton-right; color: black; } <div>Lorem</div>	Firefox
`scrollbarbutton-up`	div {-moz-appearance: scrollbarbutton-up; -webkit-appearance: scrollbarbutton-up; color: black; } <div>Lorem</div>	Firefox
`scrollbarthumb-horizontal`	div {-moz-appearance: scrollbarthumb-horizontal; -webkit-appearance: scrollbarthumb-horizontal; color: black; } <div>Lorem</div>	Firefox
`scrollbarthumb-vertical`	div {-moz-appearance: scrollbarthumb-vertical; -webkit-appearance: scrollbarthumb-vertical; color: black; } <div>Lorem</div>	Firefox
`scrollbartrack-horizontal`	div {-moz-appearance: scrollbartrack-horizontal; -webkit-appearance: scrollbartrack-horizontal; color: black; } <div>Lorem</div>	Firefox
`scrollbartrack-vertical`	div {-moz-appearance: scrollbartrack-vertical; -webkit-appearance: scrollbarbartrack-vertical; color: black; } <div>Lorem</div>	Firefox
`searchfield`	div {-moz-appearance: searchfield; -webkit-appearance: searchfield; color: black; } <div>Lorem</div>	Firefox Chrome
`searchfield-cancel-button`		Chrome
`separator`	div {-moz-appearance: separator; -webkit-appearance: separator; color: transparent; } <div>Lorem</div>	Firefox
`sheet`	div {-moz-appearance: sheet; -webkit-appearance: sheet; color: black; } <div>Lorem</div>	Firefox
`slider-horizontal`		Chrome
`slider-vertical`		Chrome
`sliderthumb-horizontal`		Chrome
`sliderthumb-vertical`		Chrome
`spinner`	div {-moz-appearance: spinner; -webkit-appearance: spinner; color: transparent; } <div>Lorem</div>	Firefox
`spinner-downbutton`	div {-moz-appearance: spinner-downbutton; -webkit-appearance: spinner-downbutton; color: black; } <div>Lorem</div>	Firefox
`spinner-textfield`	div {-moz-appearance: spinner-textfield; -webkit-appearance: spinner-textfield; color: black; } <div>Lorem</div>	Firefox
`spinner-upbutton`	div {-moz-appearance: spinner-upbutton; -webkit-appearance: spinner-upbutton; color: black; } <div>Lorem</div>	Firefox
`splitter`	div {-moz-appearance: splitter; -webkit-appearance: splitter; color: transparent; } <div>Lorem</div>	Firefox
`square-button`		Chrome
`statusbar`	div {-moz-appearance: statusbar; -webkit-appearance: statusbar; color: black; } <div>Lorem</div>	Firefox
`statusbarpanel`	div {-moz-appearance: statusbarpanel; -webkit-appearance: statusbarpanel; color: black; } <div>Lorem</div>	Firefox
`tab`	div {-moz-appearance: tab; -webkit-appearance: tab; height: 20px; color: black; } <div>Lorem</div>	Firefox
`tabpanel`	div {-moz-appearance: tabpanel; -webkit-appearance: tabpanel; color: black; } <div>Lorem</div>	Firefox
`tabpanels`	div {-moz-appearance: tabpanels; -webkit-appearance: tabpanels; color: black; } <div>Lorem</div>	Firefox
`tab-scroll-arrow-back`	div {-moz-appearance: tab-scroll-arrow-back; -webkit-appearance: tab-scroll-arrow-back; color: black; } <div>Lorem</div>	Firefox
`tab-scroll-arrow-forward`	div {-moz-appearance: tab-scroll-arrow-forward; -webkit-appearance: tab-scroll-arrow-forward; color: black; } <div>Lorem</div>	Firefox
`textarea`		Chrome
`textfield`	div {-moz-appearance: textfield; -webkit-appearance: textfield; color: black; } <div>Lorem</div>	Firefox Chrome
`textfield-multiline`	div {-moz-appearance: textfield-multiline; -webkit-appearance: textfield-multiline; color: black; } <div>Lorem</div>	Firefox
`toolbar`	div {-moz-appearance: toolbar; -webkit-appearance: toolbar; color: black; } <div>Lorem</div>	Firefox
`toolbarbutton`	div {-moz-appearance: toolbarbutton; -webkit-appearance: toolbarbutton; color: black; } <div>Lorem</div>	Firefox
`toolbarbutton-dropdown`	div {-moz-appearance: toolbarbutton-dropdown; -webkit-appearance: toolbarbutton-dropdown; color: black; } <div>Lorem</div>	Firefox
`toolbargripper`	div {-moz-appearance: toolbargripper; -webkit-appearance: toolbargripper; color: black; } <div>Lorem</div>	Firefox
`toolbox`	div {-moz-appearance: toolbox; -webkit-appearance: toolbox; color: black; } <div>Lorem</div>	Firefox
`tooltip`	div {-moz-appearance: tooltip; -webkit-appearance: tooltip; color: black; } <div>Lorem</div>	Firefox
`treeheader`	div {-moz-appearance: treeheader; -webkit-appearance: treeheader; color: black; } <div>Lorem</div>	Firefox
`treeheadercell`	div {-moz-appearance: treeheadercell; -webkit-appearance: treeheadercell; height:20px; color: black; } <div>Lorem</div>	Firefox
`treeheadersortarrow`	div {-moz-appearance: treeheadersortarrow; -webkit-appearance: treeheadersortarrow; color: black; } <div>Lorem</div>	Firefox
`treeitem`	div {-moz-appearance: treeitem; -webkit-appearance: treeitem; color: black; } <div>Lorem</div>	Firefox
`treeline`	div {-moz-appearance: treeline; -webkit-appearance: treeline; color: black; } <div>Lorem</div>	Firefox
`treetwisty`	div {-moz-appearance: treetwisty; -webkit-appearance: treetwisty; color: transparent; } <div>Lorem</div>	Firefox
`treetwistyopen`	div {-moz-appearance: treetwistyopen; -webkit-appearance: treetwistyopen; color: transparent; } <div>Lorem</div>	Firefox
`treeview`	div {-moz-appearance: treeview; -webkit-appearance: treeview; color: black; } <div>Lorem</div>	Firefox
`-moz-win-borderless-glass`	div {-moz-appearance: -moz-win-borderless-glass; color: black; } <div>Lorem</div>	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`	div {-moz-appearance: -moz-win-browsertabbar-toolbox; color: black; } <div>Lorem</div>	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`	div {-moz-appearance: -moz-win-communicationstext; color: black; } <div>Lorem</div>	Firefox
`-moz-win-communications-toolbox`	div {-moz-appearance: -moz-win-communications-toolbox; color: black; } <div>Lorem</div>	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`	div {-moz-appearance: -moz-win-exclude-glass; color: black; } <div>Lorem</div>	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`	div {-moz-appearance: -moz-win-glass; color: black; } <div>Lorem</div>	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`	div {-moz-appearance: -moz-win-mediatext; color: black; } <div>Lorem</div>	Firefox

`-moz-win-media-toolbox`	div {-moz-appearance: -moz-win-media-toolbox; color: black; } <div>Lorem</div>	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`	div {-moz-appearance: -moz-window-button-box; color: black; } <div>Lorem</div>	Firefox
`-moz-window-button-box-maximized`	div {-moz-appearance: -moz-window-button-box-maximized; color: black; } <div>Lorem</div>	Firefox
`-moz-window-button-close`	div {-moz-appearance: -moz-window-button-close; color: black; } <div>Lorem</div>	Firefox
`-moz-window-button-maximize`	div {-moz-appearance: -moz-window-button-maximize; color: black; } <div>Lorem</div>	Firefox
`-moz-window-button-minimize`	div {-moz-appearance: -moz-window-button-minimize; color: black; } <div>Lorem</div>	Firefox
`-moz-window-button-restore`	div {-moz-appearance: -moz-window-button-restore; color: black; } <div>Lorem</div>	Firefox
`-moz-window-frame-bottom`	div {-moz-appearance: -moz-window-frame-bottom; color: black; } <div>Lorem</div>	Firefox
`-moz-window-frame-left`	div {-moz-appearance: -moz-window-frame-left; color: black; } <div>Lorem</div>	Firefox
`-moz-window-frame-right`	div {-moz-appearance: -moz-window-frame-right; color: black; } <div>Lorem</div>	Firefox
`-moz-window-titlebar`	div {-moz-appearance: -moz-window-titlebar; color: black; } <div>Lorem</div>	Firefox
`-moz-window-titlebar-maximized`	div {-moz-appearance: -moz-window-titlebar-maximized; color: black; } <div>Lorem</div>	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

	Ordinateur						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Webview Android	Chrome pour Android	Edge Mobile	Firefox pour Android	Opera pour Android	Safari sur iOS	Samsung 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 Non	Opera 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 1	Edge Support complet 12	Firefox 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 Non	Opera Support complet 15	Safari Support complet 3	WebView Android Support complet 1	Chrome Android Support complet 18	Edge Mobile Support complet 12	Firefox 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 14	Safari iOS Support complet 3	Samsung Internet Android Support complet 4.0
`auto` Expérimentale	Chrome Aucun support Non	Edge Aucun support Non	Firefox Aucun support Non	IE Aucun support Non	Opera Aucun support Non	Safari Aucun support Non	WebView Android Aucun support Non	Chrome Android Aucun support Non	Edge Mobile Aucun support Non	Firefox Android Aucun support Non	Opera Android Aucun support Non	Safari iOS Aucun support Non	Samsung 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

Définition de appearance dans la recommandation CSS 3 Basic User Interface (Candidate Recommendation du 11 mai 2004), qui n'est plus à jour
Brouillon pour la propriété appearance dans le module CSS Basic UI de niveau 4
Les fonctionnalités abandonnées pour la spécification CSS3 sur le module d'interface utilisateur