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

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. 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.

Syntaxe

/* Valeurs pour la spécification CSS Basic User Interface Module Level 4 */
appearance: none;
appearance: auto; 
appearance: button;
appearance: textfield;
appearance: searchfield;
appearance: textarea;
appearance: push-button;
appearance: button-bevel;
appearance: slider-horizontal;
appearance: checkbox;
appearance: radio;
appearance: square-button;
appearance: menulist;
appearance: menulist-button;
appearance: listbox;
appearance: meter;
appearance: progress-bar;

/* Liste des valeurs disponibles pour Gecko */
-moz-appearance: scrollbarbutton-up;
-moz-appearance: button-bevel;

/* Liste des valeurs disponibles pour WebKit/Blink (ainsi que pour Gecko et Edge) */
-webkit-appearance: media-mute-button;
-webkit-appearance: caret;

Valeurs

<appearance> est l’une des valeurs suivantes :

Valeur	Démonstration	Navigateur	Description
`none`	div{ color: black; -moz-appearance:none; -webkit-appearance:none; appearance:none; } <div>Lorem</div>	Firefox Chrome Safari Edge	Aucune mise en forme spécifique n'est appliquée. Le comportement obtenu est le comportement par défaut.
`auto`	div{ color: black; -moz-appearance: auto; -webkit-appearance: auto; appearance:auto; } <div>Lorem</div>	Aucun	L'agent utilisateur sélectionne la mise en forme spécifique selon l'élément utilisé. Cette valeur sera synonyme de `none` sur les éléments sans mise en forme particulière.
`attachment`	div{ color: black; -moz-appearance: attachment; -webkit-appearance: attachment; } <div>Lorem</div>	Safari
`borderless-attachment`	div{ color: black; -moz-appearance: borderless-attachment; -webkit-appearance: borderless-attachment; } <div>Lorem</div>	Safari
`button`	div { color: black; -moz-appearance: button; -webkit-appearance: button; } <div>Lorem</div>	Firefox Chrome Safari Edge	L'élément est dessiné comme un bouton.
`button-arrow-down`	div { color: black; -moz-appearance: button-arrow-down; -webkit-appearance: button-arrow-down; } <div>Lorem</div>	Firefox	Retiré avec Fx 64
`button-arrow-next`	div { color: black; -moz-appearance: button-arrow-next; -webkit-appearance: button-arrow-next; } <div>Lorem</div>	Firefox	Retiré avec Fx 64
`button-arrow-previous`	div { color: black; -moz-appearance: button-arrow-previous; -webkit-appearance: button-arrow-previous; } <div>Lorem</div>	Firefox	Retiré avec Fx 64
`button-arrow-up`	div { color: black; -moz-appearance: button-arrow-up; -webkit-appearance: button-arrow-up; } <div>Lorem</div>	Firefox	Retiré avec Fx 64
`button-bevel`	div { color: black; -moz-appearance: button-bevel; -webkit-appearance: button-bevel; } <div>Lorem</div>	Firefox Chrome Safari Edge
`button-focus`	div { color: black; -moz-appearance: button-focus; -webkit-appearance: button-focus; } <div>Lorem</div>	Firefox	Retiré avec Fx 64
`caps-lock-indicator`	div{ color: black; -moz-appearance: caps-lock-indicator; -webkit-appearance: caps-lock-indicator; } <div>Lorem</div>	Safari Edge
`caret`	div { color: black; -moz-appearance: caret; -webkit-appearance: caret; } <div>Lorem</div>	Firefox Chrome Safari Edge
`checkbox`	div { color: black; -moz-appearance: checkbox; -webkit-appearance: checkbox; } <div>Lorem</div>	Firefox Chrome Safari Edge	L'élément est dessiné comme une case à cocher (seule la partie correspondant à la case est incluse).
`checkbox-container`	div { color: black; -moz-appearance: checkbox-container; -webkit-appearance: checkbox-container; } <div>Lorem</div>	Firefox	L'élément est dessiné comme un conteneur de case à cocher. Celui-ci peut inclure un effet d'ombre portée pour certaines plateformes. L'élément contient normalement un libellé et une case à cocher.
`checkbox-label`	div { color: black; -moz-appearance: checkbox-label; -webkit-appearance: checkbox-label; } <div>Lorem</div>	Firefox
`checkmenuitem`	div { color: black; height: 20px; -moz-appearance: checkmenuitem; -webkit-appearance: checkmenuitem; } <div>Lorem</div>	Firefox
`color-well`	div{ color: black; -moz-appearance: color-well; -webkit-appearance: color-well; } <div>Lorem</div>	Safari	`input type=color`
`continuous-capacity-level-indicator`	div{ color: black; -moz-appearance: continuous-capacity-level-indicator; -webkit-appearance: continuous-capacity-level-indicator; } <div>Lorem</div>	Safari
`default-button`	div{ color: black; -moz-appearance: default-button; -webkit-appearance: default-button; } <div>Lorem</div>	Safari Edge
`discrete-capacity-level-indicator`	div{ color: black; -moz-appearance: discrete-capacity-level-indicator; -webkit-appearance: discrete-capacity-level-indicator; } <div>Lorem</div>	Safari
`dualbutton`	div { color: black; -moz-appearance: dualbutton; -webkit-appearance: dualbutton; } <div>Lorem</div>	Firefox	Retiré avec Fx 64
`groupbox`	div { color: black; -moz-appearance: groupbox; -webkit-appearance: groupbox; } <div>Lorem</div>	Firefox	Retiré avec Fx 64
`inner-spin-button`	div{ color: black; -webkit-appearance: inner-spin-button; } <div>Lorem</div>	Firefox Chrome Safari
`image-controls-button`	div{ color: black; -moz-appearance: image-controls-button; -webkit-appearance: image-controls-button; } <div>Lorem</div>	Safari
`list-button`	div{ color: black; -moz-appearance: list-button; -webkit-appearance: list-button; } <div>Lorem</div>	Safari	Liste de données.
`listbox`	div { color: black; height:20px; -moz-appearance: listbox; -webkit-appearance: listbox; } <div>Lorem</div>	Firefox Chrome Safari Edge
`listitem`	div { color: black; -moz-appearance: listitem; -webkit-appearance: listitem; } <div>Lorem</div>	Firefox Chrome Safari Edge
`media-enter-fullscreen-button`	div{ color: black; -webkit-appearance: media-enter-fullscreen-button; } <div>Lorem</div>	Chrome Safari
`media-exit-fullscreen-button`	div{ color: black; -webkit-appearance: media-exit-fullscreen-button; } <div>Lorem</div>	Chrome Safari
`media-fullscreen-volume-slider`	div{ color: black; -moz-appearance: media-fullscreen-volume-slider; -webkit-appearance: media-fullscreen-volume-slider; } <div>Lorem</div>	Safari
`media-fullscreen-volume-slider-thumb`	div{ color: black; -moz-appearance: media-fullscreen-volume-slider-thumb; -webkit-appearance: media-fullscreen-volume-slider-thumb; } <div>Lorem</div>	Safari
`media-mute-button`	div{ color: black; -webkit-appearance: media-mute-button; } <div>Lorem</div>	Chrome Safari Edge
`media-play-button`	div{ color: black; -webkit-appearance: media-play-button; } <div>Lorem</div>	Chrome Safari Edge
`media-overlay-play-button`	div{ color: black; -webkit-appearance: media-overlay-play-button; } <div>Lorem</div>	Chrome Safari
`media-return-to-realtime-button`	div{ color: black; -moz-appearance: media-return-to-realtime-button; -webkit-appearance: media-return-to-realtime-button; } <div>Lorem</div>	Safari
`media-rewind-button`	div{ color: black; -moz-appearance: media-rewind-button; -webkit-appearance: media-rewind-button; } <div>Lorem</div>	Safari
`media-seek-back-button`	div{ color: black; -moz-appearance: media-seek-back-button; -webkit-appearance: media-seek-back-button; } <div>Lorem</div>	Safari Edge
`media-seek-forward-button`	div{ color: black; -moz-appearance: media-seek-forward-button; -webkit-appearance: media-seek-forward-button; } <div>Lorem</div>	Safari Edge
`media-toggle-closed-captions-button`	div{ color: black; -webkit-appearance: media-toggle-closed-captions-button; } <div>Lorem</div>	Chrome Safari
`media-slider`	div{ color: black; -webkit-appearance: media-slider; } <div>Lorem</div>	Chrome Safari Edge
`media-sliderthumb`	div{ color: black; -webkit-appearance: media-sliderthumb; } <div>Lorem</div>	Chrome Safari Edge
`media-volume-slider-container`	div{ color: black; -webkit-appearance: media-volume-slider-container; } <div>Lorem</div>	Chrome Safari
`media-volume-slider-mute-button`	div{ color: black; -moz-appearance: media-volume-slider-mute-button; -webkit-appearance: media-volume-slider-mute-button; } <div>Lorem</div>	Safari
`media-volume-slider`	div{ color: black; -webkit-appearance: media-volume-slider; } <div>Lorem</div>	Chrome Safari
`media-volume-sliderthumb`	div{ color: black; -webkit-appearance: media-volume-slider-thumb; } <div>Lorem</div>	Chrome Safari
`media-controls-background`	div{ color: black; -webkit-appearance: media-controls-background; } <div>Lorem</div>	Chrome Safari
`media-controls-dark-bar-background`	div{ color: black; -moz-appearance: media-controls-dark-bar-background; -webkit-appearance: media-controls-dark-bar-background; } <div>Lorem</div>	Safari
`media-controls-fullscreen-background`	div{ color: black; -webkit-appearance: media-controls-fullscreen-background; } <div>Lorem</div>	Chrome Safari
`media-controls-light-bar-background`	div{ color: black; -moz-appearance: media-controls-light-bar-background; -webkit-appearance: media-controls-light-bar-background; } <div>Lorem</div>	Safari
`media-current-time-display`	div{ color: black; -webkit-appearance: media-current-time-display; } <div>Lorem</div>	Chrome Safari
`media-time-remaining-display`	div{ color: black; -webkit-appearance: media-time-remaining-display; } <div>Lorem</div>	Chrome Safari
`menuarrow`	div { color: black; -moz-appearance: menuarrow; -webkit-appearance: menuarrow; } <div>Lorem</div>	Firefox	Retiré avec Fx 64
`menubar`	div { color: balck; -moz-appearance: menubar; -webkit-appearance: menubar; } <div>Lorem</div>	Firefox	Retiré avec Fx 64
`menucheckbox`	div { color: black; -moz-appearance: menucheckbox; -webkit-appearance: menucheckbox; } <div>Lorem</div>	Firefox	Retiré avec Fx 64
`menuimage`	div { color: black; -moz-appearance: menuimage; -webkit-appearance: menuimage; } <div>Lorem</div>	Firefox	Retiré avec Fx 64
`menuitem`	div { color: black; -moz-appearance: menuitem; -webkit-appearance: menuitem; } <div>Lorem</div>	Firefox	Retiré avec Fx 64, l'élément était mis en forme à la façon d'un élément de menu et l'élément était surligné au survol.
`menuitemtext`	div { color: black; -moz-appearance: menuitemtext; -webkit-appearance: menuitemtext; } <div>Lorem</div>	Firefox	Retiré avec Fx 64
`menulist`	div { color: black; -moz-appearance: menulist; -webkit-appearance: menulist; } <div>Lorem</div>	Firefox Chrome Safari Edge
`menulist-button`	div { color: black; -moz-appearance: menulist-button; -webkit-appearance: menulist-button; } <div>Lorem</div>	Firefox Chrome Safari Edge	L'élément est mis en forme comme un bouton indicant qu'un menu peut être ouvert.
`menulist-text`	div { color: black; -moz-appearance: menulist-text; -webkit-appearance: menulist-text; } <div>Lorem</div>	Firefox Chrome Safari Edge
`menulist-textfield`	div { color: black; -moz-appearance: menulist-textfield; -webkit-appearance: menulist-textfield; } <div>Lorem</div>	Firefox Chrome Safari Edge	L'élément est mis en forme comme un champ texte d'une liste de menu (non implémenté pour Windows).
`menupopup`	div { color: black; -moz-appearance: menupopup; -webkit-appearance: menupopup; } <div>Lorem</div>	Firefox	Retiré avec Fx 64
`menuradio`	div { color: black; -moz-appearance: menuradio; -webkit-appearance: menuradio; } <div>Lorem</div>	Firefox	Retiré avec Fx 64
`menuseparator`	div { color: transparent; -moz-appearance: menuseparator; -webkit-appearance: menuseparator; } <div>Lorem</div>	Firefox	Retiré avec Fx 64
`meter`	div{ color: black; -webkit-appearance: meter; } <div>Lorem</div>	Chrome Safari Firefox	Apparu avec Fx 64
`meterbar`	div { color: black; -moz-appearance: meterbar; -webkit-appearance: meterbar; } <div>Lorem</div>	Firefox	Apparu avec Fx 16. Utiliser la valeur `meter` à la place.
`meterchunk`	div { color: black; -moz-appearance: meterchunk; -webkit-appearance: meterchunk; } <div>Lorem</div>	Firefox	Apparu avec Fx 16. Retiré avec Fx 64.
`number-input`	div { color: black; -moz-appearance: number-input; -webkit-appearance: number-input; } <div>Lorem</div>	Firefox
`progress-bar`	div{ color: black; -webkit-appearance: progress-bar; } <div>Lorem</div>	Chrome Safari FIrefox	Apparu avec Fx 64
`progress-bar-value`	div{ color: black; -webkit-appearance: progress-bar-value; } <div>Lorem</div>	Chrome Safari
`progressbar`	div { color: black; -moz-appearance: progressbar; -webkit-appearance: progressbar; } <div>Lorem</div>	Firefox	L'élément est mis en forme comme une barre de progression. On utilisera `progress-bar` à la place.
`progressbar-vertical`	div { color: transparent; -moz-appearance: progressbar-vertical; -webkit-appearance: preogressbar-vertical; } <div>Lorem</div>	Firefox
`progresschunk`	div { color: black; -moz-appearance: progresschunk; -webkit-appearance: progresschunk; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`progresschunk-vertical`	div { color: black; -moz-appearance: progresschunk-vertical; -webkit-appearance: progresschunk-vertical; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`push-button`	div{ color: black; -webkit-appearance: push-button; } <div>Lorem</div>	Chrome Safari Edge
`radio`	div { color: black; -moz-appearance: radio; -webkit-appearance: radio; } <div>Lorem</div>	Firefox Chrome Safari Edge	L'élément est dessiné comme un bouton radio. Seule la partie correspondant au bouton est incluse.
`radio-container`	div { color: black; -moz-appearance: radio-container; -webkit-appearance: radio-container; } <div>Lorem</div>	Firefox	Retiré avec Fx 64, l'élément est dessiné comme un conteneur de bouton radio. Cette mise en forme peut inclure une ombre portée sous le bouton pour certaines plateformes. L'élément contient normalement un libellé et un bouton radio.
`radio-label`	div { color: black; -moz-appearance: radio-label; -webkit-appearance: radio-label; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`radiomenuitem`	div { color: black; -moz-appearance: radiomenuitem; -webkit-appearance: radiomenuitem; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`range`	div { color: black; -moz-appearance: range; -webkit-appearance: range; } range <div>Lorem</div>	Firefox
`range-thumb`	div { color: black; -moz-appearance: range-thumb; -webkit-appearance: range-thumb; } <div>Lorem</div>	Firefox
`rating-level-indicator`	div{ color: black; -moz-appearance: rating-level-indicator; -webkit-appearance: rating-level-indicator; } <div>Lorem</div>	Safari
`resizer`	div { color: transparent; -moz-appearance: resizer; -webkit-appearance: resizer; } <div>Lorem</div>	Firefox	Retiré avec Fx 63
`resizerpanel`	div { color: black; -moz-appearance: resizerpanel; -webkit-appearance: resizerpanel; } <div>Lorem</div>	Firefox	Retiré avec Fx 63.
`scale-horizontal`	div { color: transparent; -moz-appearance: scale-horizontal; -webkit-appearance: scale-horizontal; } <div>Lorem</div>	Firefox
`scalethumbend`	div { color: black; -moz-appearance: scalethumbend; -webkit-appearance: scalethumbend; } <div>Lorem</div>	Firefox
`scalethumb-horizontal`	div { color: transparent; -moz-appearance: scalethumb-horizontal; -webkit-appearance: scalethumb-horizontal; } <div>Lorem</div>	Firefox
`scalethumbstart`	div { color: black; -moz-appearance: scalethumbstart; -webkit-appearance: scalethumbstart; } <div>Lorem</div>	Firefox
`scalethumbtick`	div { color: black; -moz-appearance: scalethumbtick; -webkit-appearance: scalethumbtick; } <div>Lorem</div>	Firefox
`scalethumb-vertical`	div { color: black; -moz-appearance: scalethumb-vertical; -webkit-appearance: scalethumb-vertical; } <div>Lorem</div>	Firefox
`scale-vertical`	div { color: transparent; -moz-appearance: scale-vertical; -webkit-appearance: scale-vertical; } <div>Lorem</div>	Firefox
`scrollbarbutton-down`	div { color: black; -moz-appearance: scrollbarbutton-down; -webkit-appearance: scrollbarbutton-down; } <div>Lorem</div>	Firefox	Retiré avec Fx 63.
`scrollbarbutton-left`	div { color: black; -moz-appearance: scrollbarbutton-left; -webkit-appearance: scrollbarbutton-left; } <div>Lorem</div>	Firefox	Retiré avec Fx 63.
`scrollbarbutton-right`	div { color: black; -moz-appearance: scrollbarbutton-right; -webkit-appearance: scrollbarbutton-right; } <div>Lorem</div>	Firefox	Retiré avec Fx 63.
`scrollbarbutton-up`	div { color: black; -moz-appearance: scrollbarbutton-up; -webkit-appearance: scrollbarbutton-up; } <div>Lorem</div>	Firefox	Retiré avec Fx 63.
`scrollbarthumb-horizontal`	div { color: black; -moz-appearance: scrollbarthumb-horizontal; -webkit-appearance: scrollbarthumb-horizontal; } <div>Lorem</div>	Firefox
`scrollbarthumb-vertical`	div { color: black; -moz-appearance: scrollbarthumb-vertical; -webkit-appearance: scrollbarthumb-vertical; } <div>Lorem</div>	Firefox
`scrollbartrack-horizontal`	div { color: black; -moz-appearance: scrollbartrack-horizontal; -webkit-appearance: scrollbartrack-horizontal; } <div>Lorem</div>	Firefox
`scrollbartrack-vertical`	div { color: black; -moz-appearance: scrollbartrack-vertical; -webkit-appearance: scrollbarbartrack-vertical; } <div>Lorem</div>	Firefox
`searchfield`	div { color: black; -moz-appearance: searchfield; -webkit-appearance: searchfield; } <div>Lorem</div>	Firefox Chrome Safari Edge
`searchfield-decoration`	div{ color: black; -moz-appearance: searchfield-decoration; -webkit-appearance: searchfield-decoration; } <div>Lorem</div>	Safari Edge
`searchfield-results-decoration`	div{ color: black; -moz-appearance: searchfield-results-decoration; -webkit-appearance: searchfield-results-decoration; } <div>Lorem</div>	Safari Edge
`searchfield-results-button`	div{ color: black; -moz-appearance: searchfield-results-button; -webkit-appearance: searchfield-results-button; } <div>Lorem</div>	Safari Edge
`searchfield-cancel-button`	div{ color: black; -webkit-appearance: searchfield-cancel-button; } <div>Lorem</div>	Chrome Safari Edge
`snapshotted-plugin-overlay`	div{ color: black; -moz-appearance: snapshotted-plugin-overlay; -webkit-appearance: snapshotted-plugin-overlay; } <div>Lorem</div>	Safari
`separator`	div { color: transparent; -moz-appearance: separator; -webkit-appearance: separator; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`sheet`	div { color: black; -moz-appearance: sheet; -webkit-appearance: sheet; } <div>Lorem</div>	None
`slider-horizontal`	div{ color: black; -webkit-appearance: slider-horizontal; } <div>Lorem</div>	Chrome Safari Edge
`slider-vertical`	div{ color: black; -webkit-appearance: slider-vertical; } <div>Lorem</div>	Chrome Safari Edge
`sliderthumb-horizontal`	div{ color: black; -webkit-appearance: slider-thumb-horizontal; } <div>Lorem</div>	Chrome Safari Edge
`sliderthumb-vertical`	div{ color: black; -webkit-appearance: slider-thumb-vertical; } <div>Lorem</div>	Chrome Safari Edge
`spinner`	div { color: transparent; -moz-appearance: spinner; -webkit-appearance: spinner; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`spinner-downbutton`	div { color: black; -moz-appearance: spinner-downbutton; -webkit-appearance: spinner-downbutton; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`spinner-textfield`	div { color: black; -moz-appearance: spinner-textfield; -webkit-appearance: spinner-textfield; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`spinner-upbutton`	div { color: black; -moz-appearance: spinner-upbutton; -webkit-appearance: spinner-upbutton; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`splitter`	div { color: transparent; -moz-appearance: splitter; -webkit-appearance: splitter; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`square-button`	div{ color: black; -moz-appearance: square-button; -webkit-appearance: square-button; } <div>Lorem</div>	Chrome Safari Edge
`statusbar`	div { color: black; -moz-appearance: statusbar; -webkit-appearance: statusbar; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`statusbarpanel`	div { color: black; -moz-appearance: statusbarpanel; -webkit-appearance: statusbarpanel; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`tab`	div { color: black; height: 20px; -moz-appearance: tab; -webkit-appearance: tab; } <div>Lorem</div>	Firefox	Retiré avec Fx 64
`tabpanel`	div { color: black; -moz-appearance: tabpanel; -webkit-appearance: tabpanel; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`tabpanels`	div { color: black; -moz-appearance: tabpanels; -webkit-appearance: tabpanels; } <div>Lorem</div>	Firefox	Retiré avec Fx 64
`tab-scroll-arrow-back`	div { color: black; -moz-appearance: tab-scroll-arrow-back; -webkit-appearance: tab-scroll-arrow-back; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`tab-scroll-arrow-forward`	div { color: black; -moz-appearance: tab-scroll-arrow-forward; -webkit-appearance: tab-scroll-arrow-forward; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`textarea`	div{ color: black; -webkit-appearance: textarea; } <div>Lorem</div>	Firefox Chrome Safari Edge
`textfield`	div { color: black; -moz-appearance: textfield; -webkit-appearance: textfield; } <div>Lorem</div>	Firefox Chrome Safari Edge
`textfield-multiline`	div { color: black; -moz-appearance: textfield-multiline; -webkit-appearance: textfield-multiline; } <div>Lorem</div>	Firefox	Utiliser `textarea` à la place de cette valeur.
`toolbar`	div { color: black; -moz-appearance: toolbar; -webkit-appearance: toolbar; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`toolbarbutton`	div { color: black; -moz-appearance: toolbarbutton; -webkit-appearance: toolbarbutton; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`toolbarbutton-dropdown`	div { color: black; -moz-appearance: toolbarbutton-dropdown; -webkit-appearance: toolbarbutton-dropdown; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`toolbargripper`	div { color: black; -moz-appearance: toolbargripper; -webkit-appearance: toolbargripper; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`toolbox`	div { color: black; -moz-appearance: toolbox; -webkit-appearance: toolbox; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`tooltip`	div { color: black; -moz-appearance: tooltip; -webkit-appearance: tooltip; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`treeheader`	div { color: black; -moz-appearance: treeheader; -webkit-appearance: treeheader; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`treeheadercell`	div { color: black; height:20px; -moz-appearance: treeheadercell; -webkit-appearance: treeheadercell; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`treeheadersortarrow`	div { color: black; -moz-appearance: treeheadersortarrow; -webkit-appearance: treeheadersortarrow; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`treeitem`	div { color: black; -moz-appearance: treeitem; -webkit-appearance: treeitem; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`treeline`	div { color: black; -moz-appearance: treeline; -webkit-appearance: treeline; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`treetwisty`	div { color: transparent; -moz-appearance: treetwisty; -webkit-appearance: treetwisty; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`treetwistyopen`	div { color: transparent; -moz-appearance: treetwistyopen; -webkit-appearance: treetwistyopen; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`treeview`	div { color: black; -moz-appearance: treeview; -webkit-appearance: treeview; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`relevancy-level-indicator`	div{ color: black; -moz-appearance: relevancy-level-indicator; -webkit-appearance: relevancy-level-indicator; } <div>Lorem</div>	Safari
`-moz-win-borderless-glass`	div { color: black; -moz-appearance: -moz-win-borderless-glass; } <div>Lorem</div>	Firefox	Retiré avec Fx 64. Ce style applique l'effet Aero Glass sans bordure sur l'élément.
`-moz-win-browsertabbar-toolbox`	div { color: black; -moz-appearance: -moz-win-browsertabbar-toolbox; } <div>Lorem</div>	Firefox	Retiré avec Fx 64. Ce style de boîte à outils est censé être utilisé dans la barre d'onglet du navigateur.
`-moz-win-communicationstext`	div { color: black; -moz-appearance: -moz-win-communicationstext; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`-moz-win-communications-toolbox`	div { color: black; -moz-appearance: -moz-win-communications-toolbox; } <div>Lorem</div>	Firefox	Retiré avec Fx 64. Ce style de boîte à outils devait être utilisé pour les applications relatives aux communications et à la productivit. La couleur de premier plan associée est `-moz-win-communicationstext`.
`-moz-win-exclude-glass`	div { color: black; -moz-appearance: -moz-win-exclude-glass; } <div>Lorem</div>	Firefox	Retiré avec Fx 64. Ce style permet d'exclure l'effet Aero Glass sur l'élément.
`-moz-win-glass`	div { color: black; -moz-appearance: -moz-win-glass; } <div>Lorem</div>	Firefox	Retiré avec Fx 64. Ce style permet d'appliquer l'effet Aero Glass sur l'élément.
`-moz-win-media-toolbox`	div { color: black; -moz-appearance: -moz-win-media-toolbox; } <div>Lorem</div>	Firefox	Retiré avec Fx 64. Ce style de boîte à outils est destiné aux applications qui gèrent des objets média. La couleur de premier plan correspondante est `-moz-win-mediatext`.
`-moz-window-button-box`	div { color: black; -moz-appearance: -moz-window-button-box; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`-moz-window-button-box-maximized`	div { color: black; -moz-appearance: -moz-window-button-box-maximized; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`-moz-window-button-close`	div { color: black; -moz-appearance: -moz-window-button-close; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`-moz-window-button-maximize`	div { color: black; -moz-appearance: -moz-window-button-maximize; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`-moz-window-button-minimize`	div { color: black; -moz-appearance: -moz-window-button-minimize; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`-moz-window-button-restore`	div { color: black; -moz-appearance: -moz-window-button-restore; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`-moz-window-frame-bottom`	div { color: black; -moz-appearance: -moz-window-frame-bottom; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`-moz-window-frame-left`	div { color: black; -moz-appearance: -moz-window-frame-left; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`-moz-window-frame-right`	div { color: black; -moz-appearance: -moz-window-frame-right; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`-moz-window-titlebar`	div { color: black; -moz-appearance: -moz-window-titlebar; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`-moz-window-titlebar-maximized`	div { color: black; -moz-appearance: -moz-window-titlebar-maximized; } <div>Lorem</div>	Firefox	Retiré avec Fx 64.
`-apple-pay-button`	div{ color: black; -webkit-appearance: -apple-pay-button; } <div>Lorem</div>	Safari	iOS et macOS uniquement. Disponible depuis iOS 10.1 et macOS 10.12.1

Syntaxe formelle

none | auto | button | textfield | menulist-button | <compat-auto>où 
<compat-auto> = searchfield | textarea | push-button | slider-horizontal | checkbox | radio | square-button | menulist | listbox | meter | progress-bar

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.

Valeur initiale	`auto`
Applicabilité	tous les éléments
Héritée	non
Valeur calculée	comme spécifié
Type d'animation	discrète

Compatibilité des navigateurs

Update compatibility data on GitHub

	Ordinateur						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Webview Android	Chrome pour Android	Firefox pour Android	Opera pour Android	Safari sur iOS	Samsung Internet
`appearance`	Chrome Support complet 84 Support complet 84 Support partiel 1 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Edge Support complet 84 Support complet 84 Support partiel 12 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Firefox Support complet 80 Support complet 80 Support partiel 1 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -moz- Support partiel 64 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit- 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 complet 70 Support complet 70 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 complet 84 Support complet 84 Support partiel 1 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Chrome Android Support complet 84 Support complet 84 Support partiel 18 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Firefox Android Support complet 80 Support complet 80 Support partiel 4 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -moz- Support partiel 64 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit- 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 complet 60 Support complet 60 Support partiel 14 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Safari iOS Support partiel 1 Préfixée Support partiel 1 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Samsung Internet Android Support partiel 1.0 Préfixée Support partiel 1.0 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
`auto`	Chrome Support complet 83	Edge Support complet 83	Firefox Support complet 80	IE Aucun support Non	Opera Support complet 69	Safari Aucun support Non	WebView Android Support complet 83	Chrome Android Support complet 83	Firefox Android Support complet 80	Opera Android Support complet 59	Safari iOS Aucun support Non	Samsung Internet Android Support complet 13.0
`<compat-auto>` (compatibility values `searchfield`, `textarea`, `push-button`, `slider-horizontal`, `checkbox`, `radio`, `square-button`, `menulist`, `listbox`, `meter`, `progress-bar`, `button`)	Chrome Support complet 83 Support complet 83 Support partiel 1	Edge Support complet 83 Support complet 83 Support partiel 12	Firefox Support complet 80 Support complet 80 Support partiel 1	IE Aucun support Non	Opera Support complet 69 Support complet 69 Support partiel 15	Safari Support partiel 3	WebView Android Support complet 83 Support complet 83 Support partiel 1	Chrome Android Support complet 83 Support complet 83 Support partiel 18	Firefox Android Support complet 80 Support complet 80 Support partiel 4	Opera Android Support complet 59 Support complet 59 Support partiel 14	Safari iOS Support partiel 1	Samsung Internet Android Support partiel 1.0
`menulist-button`	Chrome Support complet 83 Support complet 83 Support partiel 1	Edge Support complet 83 Support complet 83 Support partiel 12	Firefox Support complet 80 Support complet 80 Support partiel 1 Notes Notes See bug 1481615.	IE Aucun support Non	Opera Support complet 69 Support complet 69 Support partiel 15	Safari Support partiel 3	WebView Android Support complet 83 Support complet 83 Support partiel 1	Chrome Android Support complet 83 Support complet 83 Support partiel 18	Firefox Android Support complet 80 Support complet 80 Support partiel 4 Notes Notes See bug 1481615.	Opera Android Support complet 59 Support complet 59 Support partiel 14	Safari iOS Support partiel 1	Samsung Internet Android Support partiel 1.0
`none`	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	Firefox Android Support complet 54 Support complet 54 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 1.0
`textfield`	Chrome Support complet 83 Support complet 83 Support partiel 1	Edge Support complet 83 Support complet 83 Support partiel 12	Firefox Support complet 80 Support complet 80 Support partiel 1	IE Aucun support Non	Opera Support complet 69 Support complet 69 Support partiel 15	Safari Support partiel 3	WebView Android Support complet 83 Support complet 83 Support partiel 1	Chrome Android Support complet 83 Support complet 83 Support partiel 18	Firefox Android Support complet 80 Support complet 80 Support partiel 4	Opera Android Support complet 59 Support complet 59 Support partiel 14	Safari iOS Support partiel 1	Samsung Internet Android Support partiel 1.0

Légende

Support complet: Support complet
Support partiel: Support partiel
Aucun support: Aucun support
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