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

Experimental

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 This is an experimental API that should not be used in production code. 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 Cette API n'a pas été standardisée. Safari
borderless-attachment Cette API n'a pas été standardisée. Safari
button Cette API n'a pas été standardisée. Firefox Chrome Safari Edge L'élément est dessiné comme un bouton.
button-arrow-down Cette API n'a pas été standardisée. Firefox

Retiré avec Fx 64

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

Chrome Safari Firefox

Apparu avec Fx 64

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

Retiré avec Fx 64.

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

Syntaxe formelle

none | auto | textfield | menulist-button | <compat-auto>


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

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
Valeur calculéecomme spécifié
Type d'animationdiscrète

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi