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.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
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 |
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
Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter https://github.com/mdn/browser-compat-data et à nous envoyer unepull request.
Update compatibility data on GitHub
| Ordinateur | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
appearance | Chrome
Support partiel
1
| Edge
Support partiel
12
| Firefox
Support partiel
1
| IE Aucun support Non | Opera
Support partiel
15
| Safari
Support partiel
3
| WebView Android
Support partiel
1
| Chrome Android
Support partiel
18
| Firefox Android
Support partiel
4
| Opera Android
Support partiel
14
| Safari iOS
Support partiel
1
| Samsung Internet Android
Support partiel
1.0
|
auto | Chrome Aucun support Non | Edge Aucun support Non | Firefox Aucun support Non | IE Aucun support Non | Opera Aucun support Non | Safari Aucun support Non | WebView Android Aucun support Non | Chrome Android Aucun support Non | Firefox Android Aucun support Non | Opera Android Aucun support Non | Safari iOS Aucun support Non | Samsung Internet Android Aucun support Non |
button | Chrome Support complet 1 | Edge Support complet 12 | Firefox Support complet 1 | 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 4 | Opera Android Support complet 14 | Safari iOS Support complet 1 | Samsung Internet Android Support complet 1.0 |
<compat-auto> (compatibility values searchfield, textarea, push-button, slider-horizontal, checkbox, radio, square-button, menulist, listbox, meter, progress-bar) | Chrome Support complet 1 | Edge Support partiel 12 | Firefox Support partiel 1 | IE Aucun support Non | Opera Support complet 15 | Safari Support complet 3 | WebView Android Support complet ≤37 | Chrome Android Support complet 18 | Firefox Android Support partiel 4 | Opera Android Support complet 14 | Safari iOS Support complet 1 | Samsung Internet Android Support complet 1.0 |
menulist-button | Chrome Support complet 1 | Edge Support partiel 12 | Firefox
Support partiel
1
| IE Aucun support Non | Opera Support complet 15 | Safari Support complet 3 | WebView Android Support complet ≤37 | Chrome Android Support complet 18 | Firefox Android Support partiel 4 | Opera Android Support complet 14 | Safari iOS Support complet 1 | Samsung Internet Android Support complet 1.0 |
none | Chrome Support complet 1 | Edge Support complet 12 | Firefox
Support complet
54
| 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 partiel
4
| Opera Android Support complet 14 | Safari iOS Support complet 3 | Samsung Internet Android Support complet 1.0 |
textfield | Chrome Support complet 1 | Edge Support complet 12 | Firefox Support complet 1 | 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 4 | Opera Android Support complet 14 | Safari iOS Support complet 1 | Samsung 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
- Définition de
appearancedans 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