{CSSRef}}

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 Firefox Chrome Safari Edge Aucune mise en forme spécifique n'est appliquée. Le comportement obtenu est le comportement par défaut.
auto 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 Safari  
borderless-attachment Safari  
button Firefox Chrome Safari Edge L'élément est dessiné comme un bouton.
button-arrow-down Firefox

Retiré avec Fx 64

button-arrow-next Firefox Retiré avec Fx 64
button-arrow-previous Firefox Retiré avec Fx 64
button-arrow-up Firefox Retiré avec Fx 64
button-bevel Firefox Chrome Safari Edge  
button-focus Firefox Retiré avec Fx 64
caps-lock-indicator Safari Edge  
caret Firefox Chrome Safari Edge  
checkbox Firefox Chrome Safari Edge L'élément est dessiné comme une case à cocher (seule la partie correspondant à la case est incluse).
checkbox-container 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 Firefox  
checkmenuitem Firefox  
color-well Safari input type=color
continuous-capacity-level-indicator Safari  
default-button Safari Edge  
discrete-capacity-level-indicator Safari  
dualbutton Firefox Retiré avec Fx 64
groupbox Firefox Retiré avec Fx 64
inner-spin-button Firefox Chrome Safari  
image-controls-button Safari  
list-button Safari Liste de données.
listbox Firefox Chrome Safari Edge  
listitem Firefox Chrome Safari Edge  
media-enter-fullscreen-button Chrome Safari  
media-exit-fullscreen-button Chrome Safari  
media-fullscreen-volume-slider Safari  
media-fullscreen-volume-slider-thumb Safari  
media-mute-button Chrome Safari Edge  
media-play-button Chrome Safari Edge  
media-overlay-play-button Chrome Safari  
media-return-to-realtime-button Safari  
media-rewind-button Safari  
media-seek-back-button Safari Edge  
media-seek-forward-button Safari Edge  
media-toggle-closed-captions-button Chrome Safari  
media-slider Chrome Safari Edge  
media-sliderthumb Chrome Safari Edge  
media-volume-slider-container Chrome Safari  
media-volume-slider-mute-button Safari  
media-volume-slider Chrome Safari  
media-volume-sliderthumb Chrome Safari  
media-controls-background Chrome Safari  
media-controls-dark-bar-background Safari  
media-controls-fullscreen-background Chrome Safari  
media-controls-light-bar-background Safari  
media-current-time-display Chrome Safari  
media-time-remaining-display Chrome Safari  
menuarrow Firefox Retiré avec Fx 64
menubar Firefox Retiré avec Fx 64
menucheckbox Firefox Retiré avec Fx 64
menuimage Firefox Retiré avec Fx 64
menuitem 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 Firefox Retiré avec Fx 64
menulist Firefox Chrome Safari Edge  
menulist-button Firefox Chrome Safari Edge L'élément est mis en forme comme un bouton indicant qu'un menu peut être ouvert.
menulist-text Firefox Chrome Safari Edge  
menulist-textfield 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 Firefox Retiré avec Fx 64
menuradio Firefox Retiré avec Fx 64
menuseparator Firefox Retiré avec Fx 64
meter

Chrome Safari Firefox

Apparu avec Fx 64

meterbar Firefox Apparu avec Fx 16. Utiliser la valeur meter à la place.
meterchunk Firefox Apparu avec Fx 16. Retiré avec Fx 64.
number-input Firefox  
progress-bar Chrome Safari FIrefox Apparu avec Fx 64
progress-bar-value Chrome Safari  
progressbar Firefox L'élément est mis en forme comme une barre de progression. On utilisera progress-bar à la place.
progressbar-vertical Firefox  
progresschunk Firefox Retiré avec Fx 64.
progresschunk-vertical Firefox Retiré avec Fx 64.
push-button Chrome Safari Edge  
radio Firefox Chrome Safari Edge L'élément est dessiné comme un bouton radio. Seule la partie correspondant au bouton est incluse.
radio-container 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 Firefox Retiré avec Fx 64.
radiomenuitem Firefox Retiré avec Fx 64.
range Firefox  
range-thumb Firefox  
rating-level-indicator Safari  
resizer Firefox Retiré avec Fx 63
resizerpanel Firefox Retiré avec Fx 63.
scale-horizontal Firefox  
scalethumbend Firefox  
scalethumb-horizontal Firefox  
scalethumbstart Firefox  
scalethumbtick Firefox  
scalethumb-vertical Firefox  
scale-vertical Firefox  
scrollbarbutton-down Firefox Retiré avec Fx 63.
scrollbarbutton-left Firefox Retiré avec Fx 63.
scrollbarbutton-right Firefox Retiré avec Fx 63.
scrollbarbutton-up Firefox Retiré avec Fx 63.
scrollbarthumb-horizontal Firefox  
scrollbarthumb-vertical Firefox  
scrollbartrack-horizontal Firefox  
scrollbartrack-vertical Firefox  
searchfield Firefox Chrome Safari Edge  
searchfield-decoration Safari Edge  
searchfield-results-decoration Safari Edge  
searchfield-results-button Safari Edge  
searchfield-cancel-button Chrome Safari Edge  
snapshotted-plugin-overlay Safari  
separator Firefox

Retiré avec Fx 64.

sheet None  
slider-horizontal Chrome Safari Edge  
slider-vertical Chrome Safari Edge  
sliderthumb-horizontal Chrome Safari Edge  
sliderthumb-vertical Chrome Safari Edge  
spinner Firefox Retiré avec Fx 64.
spinner-downbutton Firefox Retiré avec Fx 64.
spinner-textfield Firefox Retiré avec Fx 64.
spinner-upbutton Firefox Retiré avec Fx 64.
splitter Firefox Retiré avec Fx 64.
square-button Chrome Safari Edge  
statusbar Firefox Retiré avec Fx 64.
statusbarpanel Firefox Retiré avec Fx 64.
tab Firefox Retiré avec Fx 64
tabpanel Firefox Retiré avec Fx 64.
tabpanels Firefox Retiré avec Fx 64
tab-scroll-arrow-back Firefox Retiré avec Fx 64.
tab-scroll-arrow-forward Firefox Retiré avec Fx 64.
textarea Firefox Chrome Safari Edge  
textfield Firefox Chrome Safari Edge  
textfield-multiline Firefox Utiliser textarea à la place de cette valeur.
toolbar Firefox Retiré avec Fx 64.
toolbarbutton Firefox Retiré avec Fx 64.
toolbarbutton-dropdown Firefox Retiré avec Fx 64.
toolbargripper Firefox Retiré avec Fx 64.
toolbox Firefox Retiré avec Fx 64.
tooltip Firefox Retiré avec Fx 64.
treeheader Firefox Retiré avec Fx 64.
treeheadercell Firefox Retiré avec Fx 64.
treeheadersortarrow Firefox Retiré avec Fx 64.
treeitem Firefox Retiré avec Fx 64.
treeline Firefox Retiré avec Fx 64.
treetwisty Firefox Retiré avec Fx 64.
treetwistyopen Firefox Retiré avec Fx 64.
treeview Firefox Retiré avec Fx 64.
relevancy-level-indicator Safari  
-moz-win-borderless-glass Firefox Retiré avec Fx 64. Ce style applique l'effet Aero Glass sans bordure sur l'élément.
-moz-win-browsertabbar-toolbox 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 Firefox Retiré avec Fx 64.
-moz-win-communications-toolbox 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 Firefox Retiré avec Fx 64. Ce style permet d'exclure l'effet Aero Glass sur l'élément.
-moz-win-glass Firefox Retiré avec Fx 64. Ce style permet d'appliquer l'effet Aero Glass sur l'élément.
-moz-win-media-toolbox 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 Firefox Retiré avec Fx 64.
-moz-window-button-box-maximized Firefox Retiré avec Fx 64.
-moz-window-button-close Firefox Retiré avec Fx 64.
-moz-window-button-maximize Firefox Retiré avec Fx 64.
-moz-window-button-minimize Firefox Retiré avec Fx 64.
-moz-window-button-restore Firefox Retiré avec Fx 64.
-moz-window-frame-bottom Firefox Retiré avec Fx 64.
-moz-window-frame-left Firefox Retiré avec Fx 64.
-moz-window-frame-right Firefox Retiré avec Fx 64.
-moz-window-titlebar Firefox Retiré avec Fx 64.
-moz-window-titlebar-maximized Firefox Retiré avec Fx 64.
-apple-pay-button Safari iOS et macOS uniquement. Disponible depuis iOS 10.1 et macOS 10.12.1

Syntaxe formelle

none | auto | button | textfield | <compat>


<compat> = searchfield | textarea | push-button | button-bevel | slider-horizontal | checkbox | radio | square-button | menulist | menulist-button | 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 initialeauto
Applicabilitétous les éléments
Héritéenon
Médiatous
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniqueselon la grammaire

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
appearance
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-
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 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
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 NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
button
Expérimentale
Chrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Aucun support NonOpera Support complet 15Safari Support complet 3WebView Android Support complet 1Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 14Safari iOS Support complet 1Samsung Internet Android Support complet 1.0
<compat> (compatibility values searchfield, textarea, push-button, button-bevel, slider-horizontal, checkbox, radio, square-button, menulist, menulist-button, listbox, meter, progress-bar)
Expérimentale
Chrome Support complet 1Edge Support partiel 12Firefox Support partiel 1IE Aucun support NonOpera Support complet 15Safari Support complet 3WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support partiel 4Opera Android Support complet 14Safari iOS Support complet 1Samsung Internet Android Support complet 1.0
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 18Firefox 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
textfield
Expérimentale
Chrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Aucun support NonOpera Support complet 15Safari Support complet 3WebView Android Support complet 1Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 14Safari iOS Support complet 1Samsung Internet Android Support complet 1.0

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

Dernière mise à jour par : SphinxKnight,