Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

-moz-appearance (-webkit-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.

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.

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é ne doit pas être utilisée sur les sites Web. Non seulement, cette propriété n'est pas standard mais son comportement varie d'un navigateur à l'autre. 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é
Animablenon
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 :

Value Demo Description
none Aucun style spécifique n'est appliqué (défaut). À noter les bugs bug 649849 et bug 605985.
button L'élément est rendu comme un bouton.
button-arrow-down  
button-arrow-next  
button-arrow-previous  
button-arrow-up  
button-bevel  
button-focus  
caret  
checkbox L'élément est rendu comme une case à cocher, incluant uniquement la partie réelle de la case à cocher.
checkbox-container L'élément est rendu comme un contenant pour une case à cocher, qui peut inclure un effet d'illumination de l'arrière-plan sous certaines plate-formes. L'élément devrait être composé d'une étiquette et d'une case à cocher.
checkbox-label  
checkmenuitem  
dualbutton  
groupbox  
listbox  
listitem  
menuarrow  
menubar  
menucheckbox  
menuimage  
menuitem L'élément est rendu comme un item de menu, l'item est mis en surbrillance lorsqu'il est survolé.
menuitemtext  
menulist  
menulist-button L'élément est rendu comme un bouton indiquant qu'une liste de menu peut être ouverte.
menulist-text  
menulist-textfield L'élément est rendu comme un champ texte pour une liste de menu. (Non implémenté sur les plateformes Windows)
menupopup  
menuradio  
menuseparator  
meterbar Nouveau depuis Firefox 16.
meterchunk Nouveau depuis Firefox 16.
progressbar L'élément est rendu comme une barre de progression.
progressbar-vertical  
progresschunk  
progresschunk-vertical  
radio L'élément est rendu comme un bouton radio, incluant uniquement la partie réelle du bouton radio.
radio-container L'élément est rendu comme un contenant pour un bouton radio, qui peut inclure un effet d'illumination de l'arrière-plan sous certaines plate-formes. L'élément devrait être composé d'une étiquette et d'un bouton radio.
radio-label  
radiomenuitem  
resizer  
resizerpanel  
scale-horizontal  
scalethumbend  
scalethumb-horizontal  
scalethumbstart  
scalethumbtick  
scalethumb-vertical  
scale-vertical  
scrollbarbutton-down  
scrollbarbutton-left  
scrollbarbutton-right  
scrollbarbutton-up  
scrollbarthumb-horizontal  
scrollbarthumb-vertical
ScreenshotLive sample
 
scrollbartrack-horizontal
ScreenshotLive sample
 
scrollbartrack-vertical  
searchfield  
separator  
sheet  
spinner  
spinner-downbutton  
spinner-textfield  
spinner-upbutton  
splitter  
statusbar  
statusbarpanel  
tab  
tabpanel  
tabpanels  
tab-scroll-arrow-back  
tab-scroll-arrow-forward  
textfield  
textfield-multiline  
toolbar  
toolbarbutton  
toolbarbutton-dropdown  
toolbargripper  
toolbox  
tooltip  
treeheader  
treeheadercell  
treeheadersortarrow  
treeitem  
treeline  
treetwisty  
treetwistyopen  
treeview  
-moz-mac-unified-toolbar Mac OS X seulement. La barre d’outils et la barre de titre sont rendues en utilisant la barre d’outils unifiée commune aux applications Mac OS X 10.4 et ultérieur.
-moz-win-borderless-glass Windows Vista et ultérieur seulement. Ce style applique l’effet Aero Glass à l’élément, mais sans bordure.
-moz-win-browsertabbar-toolbox Windows Vista et ultérieur seulement. Ce style de boîte à outils est destiné à la barre d’onglets d’un navigateur.
-moz-win-communicationstext  
-moz-win-communications-toolbox Windows Vista et ultérieur seulement. Ce style de boîte à outils est destiné aux applications de communication et de productivité. La couleur d’avant-plan correspondante est -moz-win-communicationstext.
-moz-win-exclude-glass Windows Vista et ultérieur seulement. Ce style est utilisé pour exclure l’effet Aero Glass de l’élément.
-moz-win-glass Windows Vista et ultérieur seulement. Ce style applique l’effet Aero Glass sur l’élément.
-moz-win-mediatext  
-moz-win-media-toolbox Windows Vista et ultérieur seulement. Ce style de boîte à outils est destiné aux applications gérant des objets médias. La couleur d’avant-plan correspondante est  -moz-win-mediatext.
-moz-window-button-box  
-moz-window-button-box-maximized  
-moz-window-button-close  
-moz-window-button-maximize  
-moz-window-button-minimize  
-moz-window-button-restore  
-moz-window-frame-bottom  
-moz-window-frame-left  
-moz-window-frame-right  
-moz-window-titlebar  
-moz-window-titlebar-maximized  

Exemples

.exampleun {
	-moz-appearance: toolbarbutton;
}

Spécifications

Cette propriété appearance ne fait partie d'aucune spécification standard CSS.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple 1.0 1.0 (1.7 ou moins)-moz[1] Pas de support ? 3.0-webkit
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple ? 1.0 (1.0) 11.0-webkit[2] ? ?

[1] Pas complètement prise en charge.
En plus de la version préfixée avec -moz, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) ajoute la prise en charge de la version préfixée par -webkit via la préférence layout.css.prefixes.webkit, qui valait false par défaut. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) cette préférence vaut true par défaut.

[2] Seules les valeurs none, button et textfield sont prises en charge. Voir la documentation sur MSDN (en anglais).

Voir aussi

Étiquettes et contributeurs liés au document

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