Vos résultats de recherche

-moz-appearance (-webkit-appearance)

Dans cet article

Syntaxe
1. Valeurs
Exemples
Spécifications
Compatibilité des navigateurs
Voir aussi

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 initiale	`none` (cette valeur est surchargée par le CSS de l'agent utilisateur)
Applicabilité	tous les éléments
Héritée	non
Média	visuel
Valeur calculée	comme spécifié
Animation type	discrete
Ordre canonique	l'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

 div {-moz-appearance: none; -webkit-appearance: none; color: black;}

          <div>Lorem</div>

Aucun style spécifique n'est appliqué (défaut). À noter les bugs bug 649849 et bug 605985.

button

 div {-moz-appearance: button; -webkit-appearance: button; color: black; }

          <div>Lorem</div>

L'élément est rendu comme un bouton.

button-arrow-down

 div {-moz-appearance: button-arrow-down; -webkit-appearance: button-arrow-down; color: black; }

          <div>Lorem</div>

button-arrow-next

 div {-moz-appearance: button-arrow-next; -webkit-appearance: button-arrow-next; color: black; }

          <div>Lorem</div>

button-arrow-previous

 div {-moz-appearance: button-arrow-previous; -webkit-appearance: button-arrow-previous; color: black; }

          <div>Lorem</div>

button-arrow-up

 div {-moz-appearance: button-arrow-up; -webkit-appearance: button-arrow-up; color: black; }

          <div>Lorem</div>

button-bevel

 div {-moz-appearance: button-bevel; -webkit-appearance: button-bevel; color: black; }

          <div>Lorem</div>

button-focus

 div {-moz-appearance: button-focus; -webkit-appearance: button-focus; color: black; }

          <div>Lorem</div>

caret

 div {-moz-appearance: caret; -webkit-appearance: caret; color: black; }

          <div>Lorem</div>

checkbox

 div {-moz-appearance: checkbox; -webkit-appearance: checkbox; color: black; }

          <div>Lorem</div>

L'élément est rendu comme une case à cocher, incluant uniquement la partie réelle de la case à cocher.

checkbox-container

 div {-moz-appearance: checkbox-container; -webkit-appearance: checkbox-container; color: black; }

          <div>Lorem</div>

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

 div {-moz-appearance: checkbox-label; -webkit-appearance: checkbox-label; color: black; }

          <div>Lorem</div>

checkmenuitem

 div {-moz-appearance: checkmenuitem; -webkit-appearance: checkmenuitem; height: 20px; color: black; }

          <div>Lorem</div>

dualbutton

 div {-moz-appearance: dualbutton; -webkit-appearance: dualbutton; color: black; }

          <div>Lorem</div>

groupbox

 div {-moz-appearance: groupbox; -webkit-appearance: groupbox; color: black; }

          <div>Lorem</div>

listbox

 div {-moz-appearance: listbox; -webkit-appearance: listbox; height:20px; color: black; }

          <div>Lorem</div>

listitem

 div {-moz-appearance: listitem; -webkit-appearance: listitem; color: black; }

          <div>Lorem</div>

menuarrow

 div {-moz-appearance: menuarrow; -webkit-appearance: menuarrow; color: black; }

          <div>Lorem</div>

menubar

 div {-moz-appearance: menubar; -webkit-appearance: menubar; color: balck; }

          <div>Lorem</div>

menucheckbox

 div {-moz-appearance: menucheckbox; -webkit-appearance: menucheckbox; color: black; }

          <div>Lorem</div>

menuimage

 div {-moz-appearance: menuimage; -webkit-appearance: menuimage; color: black; }

          <div>Lorem</div>

menuitem

 div {-moz-appearance: menuitem; -webkit-appearance: menuitem; color: black; }

          <div>Lorem</div>

L'élément est rendu comme un item de menu, l'item est mis en surbrillance lorsqu'il est survolé.

menuitemtext

 div {-moz-appearance: menuitemtext; -webkit-appearance: menuitemtext; color: black; }

          <div>Lorem</div>

menulist

 div {-moz-appearance: menulist; -webkit-appearance: menulist; color: black; }

          <div>Lorem</div>

menulist-button

 div {-moz-appearance: menulist-button; -webkit-appearance: menulist-button; color: black; }

          <div>Lorem</div>

L'élément est rendu comme un bouton indiquant qu'une liste de menu peut être ouverte.

menulist-text

 div {-moz-appearance: menulist-text; -webkit-appearance: menulist-text; color: black; }

          <div>Lorem</div>

menulist-textfield

 div {-moz-appearance: menulist-textfield; -webkit-appearance: menulist-textfield; color: black; }

          <div>Lorem</div>

L'élément est rendu comme un champ texte pour une liste de menu. (Non implémenté sur les plateformes Windows)

menupopup

 div {-moz-appearance: menupopup; -webkit-appearance: menupopup; color: black; }

          <div>Lorem</div>

menuradio

 div {-moz-appearance: menuradio; -webkit-appearance: menuradio; color: black; }

          <div>Lorem</div>

menuseparator

 div {-moz-appearance: menuseparator; -webkit-appearance: menuseparator; color: transparent; }

          <div>Lorem</div>

meterbar

 div {-moz-appearance: meterbar; -webkit-appearance: meterbar; color: black; }

          <div>Lorem</div>

Nouveau depuis Firefox 16.

meterchunk

 div {-moz-appearance: meterchunk; -webkit-appearance: meterchunk; color: black; }

          <div>Lorem</div>

Nouveau depuis Firefox 16.

progressbar

 div {-moz-appearance: progressbar; -webkit-appearance: progressbar; color: black; }

          <div>Lorem</div>

L'élément est rendu comme une barre de progression.

progressbar-vertical

 div {-moz-appearance: progressbar-vertical; -webkit-appearance: preogressbar-vertical; color: transparent; }

          <div>Lorem</div>

progresschunk

 div {-moz-appearance: progresschunk; -webkit-appearance: progresschunk; color: black; }

          <div>Lorem</div>

progresschunk-vertical

 div {-moz-appearance: progresschunk-vertical; -webkit-appearance: progresschunk-vertical; color: black; }

          <div>Lorem</div>

radio

 div {-moz-appearance: radio; -webkit-appearance: radio; color: black; }

          <div>Lorem</div>

L'élément est rendu comme un bouton radio, incluant uniquement la partie réelle du bouton radio.

radio-container

 div {-moz-appearance: radio-container; -webkit-appearance: radio-container; color: black; }

          <div>Lorem</div>

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

 div {-moz-appearance: radio-label; -webkit-appearance: radio-label; color: black; }

          <div>Lorem</div>

radiomenuitem

 div {-moz-appearance: radiomenuitem; -webkit-appearance: radiomenuitem; color: black; }

          <div>Lorem</div>

resizer

 div {-moz-appearance: resizer; -webkit-appearance: resizer; color: transparent; }

          <div>Lorem</div>

resizerpanel

 div {-moz-appearance: resizerpanel; -webkit-appearance: resizerpanel; color: black; }

          <div>Lorem</div>

scale-horizontal

 div {-moz-appearance: scale-horizontal; -webkit-appearance: scale-horizontal; color: transparent; }

          <div>Lorem</div>

scalethumbend

 div {-moz-appearance: scalethumbend; -webkit-appearance: scalethumbend; color: black; }

          <div>Lorem</div>

scalethumb-horizontal

 div {-moz-appearance: scalethumb-horizontal; -webkit-appearance: scalethumb-horizontal; color: transparent; }

          <div>Lorem</div>

scalethumbstart

 div {-moz-appearance: scalethumbstart; -webkit-appearance: scalethumbstart; color: black; }

          <div>Lorem</div>

scalethumbtick

 div {-moz-appearance: scalethumbtick; -webkit-appearance: scalethumbtick; color: black; }

          <div>Lorem</div>

scalethumb-vertical

 div {-moz-appearance: scalethumb-vertical; -webkit-appearance: scalethumb-vertical; color: black; }

          <div>Lorem</div>

scale-vertical

 div {-moz-appearance: scale-vertical; -webkit-appearance: scale-vertical; color: transparent; }

          <div>Lorem</div>

scrollbarbutton-down

 div {-moz-appearance: scrollbarbutton-down; -webkit-appearance: scrollbarbutton-down; color: black; }

          <div>Lorem</div>

scrollbarbutton-left

 div {-moz-appearance: scrollbarbutton-left; -webkit-appearance: scrollbarbutton-left; color: black; }

          <div>Lorem</div>

scrollbarbutton-right

 div {-moz-appearance: scrollbarbutton-right; -webkit-appearance: scrollbarbutton-right; color: black; }

          <div>Lorem</div>

scrollbarbutton-up

 div {-moz-appearance: scrollbarbutton-up; -webkit-appearance: scrollbarbutton-up; color: black; }

          <div>Lorem</div>

scrollbarthumb-horizontal

 div {-moz-appearance: scrollbarthumb-horizontal; -webkit-appearance: scrollbarthumb-horizontal; color: black; }

          <div>Lorem</div>

scrollbarthumb-vertical

 div {-moz-appearance: scrollbarthumb-vertical; -webkit-appearance: scrollbarthumb-vertical; color: black; }

          <div>Lorem</div>

Screenshot	Live sample

scrollbartrack-horizontal

 div {-moz-appearance: scrollbartrack-horizontal; -webkit-appearance: scrollbartrack-horizontal; color: black; }

          <div>Lorem</div>

Screenshot	Live sample

scrollbartrack-vertical

 div {-moz-appearance: scrollbartrack-vertical; -webkit-appearance: scrollbarbartrack-vertical; color: black; }

          <div>Lorem</div>

searchfield

 div {-moz-appearance: searchfield; -webkit-appearance: searchfield; color: black; }

          <div>Lorem</div>

separator

 div {-moz-appearance: separator; -webkit-appearance: separator; color: transparent; }

          <div>Lorem</div>

sheet

 div {-moz-appearance: sheet; -webkit-appearance: sheet; color: black; }

          <div>Lorem</div>

spinner

 div {-moz-appearance: spinner; -webkit-appearance: spinner; color: transparent; }

          <div>Lorem</div>

spinner-downbutton

 div {-moz-appearance: spinner-downbutton; -webkit-appearance: spinner-downbutton; color: black; }

          <div>Lorem</div>

spinner-textfield

 div {-moz-appearance: spinner-textfield; -webkit-appearance: spinner-textfield; color: black; }

          <div>Lorem</div>

spinner-upbutton

 div {-moz-appearance: spinner-upbutton; -webkit-appearance: spinner-upbutton; color: black; }

          <div>Lorem</div>

splitter

 div {-moz-appearance: splitter; -webkit-appearance: splitter; color: transparent; }

          <div>Lorem</div>

statusbar

 div {-moz-appearance: statusbar; -webkit-appearance: statusbar; color: black; }

          <div>Lorem</div>

statusbarpanel

 div {-moz-appearance: statusbarpanel; -webkit-appearance: statusbarpanel; color: black; }

          <div>Lorem</div>

tab

 div {-moz-appearance: tab; -webkit-appearance: tab; height: 20px; color: black; }

          <div>Lorem</div>

tabpanel

 div {-moz-appearance: tabpanel; -webkit-appearance: tabpanel; color: black; }

          <div>Lorem</div>

tabpanels

 div {-moz-appearance: tabpanels; -webkit-appearance: tabpanels; color: black; }

          <div>Lorem</div>

tab-scroll-arrow-back

 div {-moz-appearance: tab-scroll-arrow-back; -webkit-appearance: tab-scroll-arrow-back; color: black; }

          <div>Lorem</div>

tab-scroll-arrow-forward

 div {-moz-appearance: tab-scroll-arrow-forward; -webkit-appearance: tab-scroll-arrow-forward; color: black; }

          <div>Lorem</div>

textfield

 div {-moz-appearance: textfield; -webkit-appearance: textfield; color: black; }

          <div>Lorem</div>

textfield-multiline

 div {-moz-appearance: textfield-multiline; -webkit-appearance: textfield-multiline; color: black; }

          <div>Lorem</div>

toolbar

 div {-moz-appearance: toolbar; -webkit-appearance: toolbar; color: black; }

          <div>Lorem</div>

toolbarbutton

 div {-moz-appearance: toolbarbutton; -webkit-appearance: toolbarbutton; color: black; }

          <div>Lorem</div>

toolbarbutton-dropdown

 div {-moz-appearance: toolbarbutton-dropdown; -webkit-appearance: toolbarbutton-dropdown; color: black; }

          <div>Lorem</div>

toolbargripper

 div {-moz-appearance: toolbargripper; -webkit-appearance: toolbargripper; color: black; }

          <div>Lorem</div>

toolbox

 div {-moz-appearance: toolbox; -webkit-appearance: toolbox; color: black; }

          <div>Lorem</div>

tooltip

 div {-moz-appearance: tooltip; -webkit-appearance: tooltip; color: black; }

          <div>Lorem</div>

treeheader

 div {-moz-appearance: treeheader; -webkit-appearance: treeheader; color: black; }

          <div>Lorem</div>

treeheadercell

 div {-moz-appearance: treeheadercell; -webkit-appearance: treeheadercell; height:20px; color: black; }

          <div>Lorem</div>

treeheadersortarrow

 div {-moz-appearance: treeheadersortarrow; -webkit-appearance: treeheadersortarrow; color: black; }

          <div>Lorem</div>

treeitem

 div {-moz-appearance: treeitem; -webkit-appearance: treeitem; color: black; }

          <div>Lorem</div>

treeline

 div {-moz-appearance: treeline; -webkit-appearance: treeline; color: black; }

          <div>Lorem</div>

treetwisty

 div {-moz-appearance: treetwisty; -webkit-appearance: treetwisty; color: transparent; }

          <div>Lorem</div>

treetwistyopen

 div {-moz-appearance: treetwistyopen; -webkit-appearance: treetwistyopen; color: transparent; }

          <div>Lorem</div>

treeview

 div {-moz-appearance: treeview; -webkit-appearance: treeview; color: black; }

          <div>Lorem</div>

-moz-mac-unified-toolbar

 div {-moz-appearance: -moz-mac-unified-toolbar; color: black; }

          <div>Lorem</div>

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

 div {-moz-appearance: -moz-win-borderless-glass; color: black; }

          <div>Lorem</div>

Windows Vista et ultérieur seulement. Ce style applique l’effet Aero Glass à l’élément, mais sans bordure.

-moz-win-browsertabbar-toolbox

 div {-moz-appearance: -moz-win-browsertabbar-toolbox; color: black; }

          <div>Lorem</div>

Windows Vista et ultérieur seulement. Ce style de boîte à outils est destiné à la barre d’onglets d’un navigateur.

-moz-win-communicationstext

 div {-moz-appearance: -moz-win-communicationstext; color: black; }

          <div>Lorem</div>

-moz-win-communications-toolbox

 div {-moz-appearance: -moz-win-communications-toolbox; color: black; }

          <div>Lorem</div>

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

 div {-moz-appearance: -moz-win-exclude-glass; color: black; }

          <div>Lorem</div>

Windows Vista et ultérieur seulement. Ce style est utilisé pour exclure l’effet Aero Glass de l’élément.

-moz-win-glass

 div {-moz-appearance: -moz-win-glass; color: black; }

          <div>Lorem</div>

Windows Vista et ultérieur seulement. Ce style applique l’effet Aero Glass sur l’élément.

-moz-win-mediatext

 div {-moz-appearance: -moz-win-mediatext; color: black; }

          <div>Lorem</div>

-moz-win-media-toolbox

 div {-moz-appearance: -moz-win-media-toolbox; color: black; }

          <div>Lorem</div>

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

 div {-moz-appearance: -moz-window-button-box; color: black; }

          <div>Lorem</div>

-moz-window-button-box-maximized

 div {-moz-appearance: -moz-window-button-box-maximized; color: black; }

          <div>Lorem</div>

-moz-window-button-close

 div {-moz-appearance: -moz-window-button-close; color: black; }

          <div>Lorem</div>

-moz-window-button-maximize

 div {-moz-appearance: -moz-window-button-maximize; color: black; }

          <div>Lorem</div>

-moz-window-button-minimize

 div {-moz-appearance: -moz-window-button-minimize; color: black; }

          <div>Lorem</div>

-moz-window-button-restore

 div {-moz-appearance: -moz-window-button-restore; color: black; }

          <div>Lorem</div>

-moz-window-frame-bottom

 div {-moz-appearance: -moz-window-frame-bottom; color: black; }

          <div>Lorem</div>

-moz-window-frame-left

 div {-moz-appearance: -moz-window-frame-left; color: black; }

          <div>Lorem</div>

-moz-window-frame-right

 div {-moz-appearance: -moz-window-frame-right; color: black; }

          <div>Lorem</div>

-moz-window-titlebar

 div {-moz-appearance: -moz-window-titlebar; color: black; }

          <div>Lorem</div>

-moz-window-titlebar-maximized

 div {-moz-appearance: -moz-window-titlebar-maximized; color: black; }

          <div>Lorem</div>

Exemples

.exampleun {
	-moz-appearance: toolbarbutton;
}

Spécifications

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

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.

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

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 (la propriété appearance a été abandonnée dans les versions ultérieures)
Les fonctionnalités abandonnées pour la spécification CSS3 sur le module d'interface utilisateur

Étiquettes et contributeurs liés au document

Étiquettes :

Contributeurs à cette page : SphinxKnight, teoli, wakka27, ksad, FredB, Mgjbot, Fredchat, Kyodev

Dernière mise à jour par : SphinxKnight, 12 sept. 2016 à 03:48:21

Voir aussi