--- title: 'appearance (-moz-appearance, -webkit-appearance)' slug: Web/CSS/appearance tags: - CSS - Non-standard - Propriété - Reference translation_of: Web/CSS/appearance ---
{{CSSRef}}{{SeeCompatTable}}

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.

{{EmbedInteractiveExample("pages/css/appearance.html")}}

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 {{EmbedLiveSample("sampleNone",100,50,"","", "nobutton")}} Firefox Chrome Safari Edge Aucune mise en forme spécifique n'est appliquée. Le comportement obtenu est le comportement par défaut.
auto {{Experimental_Inline}} {{EmbedLiveSample("sampleAuto",100,50,"","", "nobutton")}} 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 {{Non-standard_Inline}} {{EmbedLiveSample("sampleAttachment",100,50,"","", "nobutton")}} Safari
borderless-attachment {{Non-standard_Inline}} {{EmbedLiveSample("sample-borderless-attachment",100,50,"","","nobutton")}} Safari
button {{Non-standard_Inline}} {{EmbedLiveSample("sampleButton",100,50,"","", "nobutton")}} Firefox Chrome Safari Edge L'élément est dessiné comme un bouton.
button-arrow-down {{Non-standard_Inline}} {{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}} Firefox

Retiré avec Fx 64
button-arrow-next {{Non-standard_Inline}} {{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64
button-arrow-previous {{Non-standard_Inline}} {{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64
button-arrow-up {{Non-standard_Inline}} {{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64
button-bevel {{Non-standard_Inline}} {{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}} Firefox Chrome Safari Edge
button-focus {{Non-standard_Inline}} {{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64
caps-lock-indicator {{Non-standard_Inline}} {{EmbedLiveSample("sample-caps-lock-indicator",100,50,"","","nobutton")}} Safari Edge
caret {{Non-standard_Inline}} {{EmbedLiveSample("sampleCaret",100,50,"","", "nobutton")}} Firefox Chrome Safari Edge
checkbox {{Non-standard_Inline}} {{EmbedLiveSample("sampleCheckbox",100,50,"","", "nobutton")}} Firefox Chrome Safari Edge L'élément est dessiné comme une case à cocher (seule la partie correspondant à la case est incluse).
checkbox-container {{Non-standard_Inline}} {{EmbedLiveSample("sampleCheckboxContainer",100,50,"","", "nobutton")}} 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 {{Non-standard_Inline}} {{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}} Firefox
checkmenuitem {{Non-standard_Inline}} {{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}} Firefox
color-well {{Non-standard_Inline}} {{EmbedLiveSample("sample-color-well",100,50,"","","nobutton")}} Safari input type=color
continuous-capacity-level-indicator {{Non-standard_Inline}} {{EmbedLiveSample("sample-continuous-capacity-level-indicator",100,50,"","","nobutton")}} Safari
default-button {{Non-standard_Inline}} {{EmbedLiveSample("sample-default-button",100,50,"","","nobutton")}} Safari Edge
discrete-capacity-level-indicator {{Non-standard_Inline}} {{EmbedLiveSample("sample-discrete-capacity-level-indicator",100,50,"","","nobutton")}} Safari
dualbutton {{Non-standard_Inline}} {{EmbedLiveSample("sampleDualButton",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64
groupbox {{Non-standard_Inline}} {{EmbedLiveSample("sampleGroupbox",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64
inner-spin-button {{Non-standard_Inline}} {{EmbedLiveSample("sampleInnerSpinButton",100,50,"","", "nobutton")}} Firefox Chrome Safari
image-controls-button {{Non-standard_Inline}} {{EmbedLiveSample("sample-image-controls-button",100,50,"","","nobutton")}} Safari
list-button {{Non-standard_Inline}} {{EmbedLiveSample("sample-list-button",100,50,"","","nobutton")}} Safari Liste de données.
listbox {{Non-standard_Inline}} {{EmbedLiveSample("sampleListBox",100,50,"","", "nobutton")}} Firefox Chrome Safari Edge
listitem {{Non-standard_Inline}} {{EmbedLiveSample("sampleListItem",100,50,"","", "nobutton")}} Firefox Chrome Safari Edge
media-enter-fullscreen-button {{Non-standard_Inline}} {{EmbedLiveSample("sampleMediaEnterFullscreenButton",100,50,"","", "nobutton")}} Chrome Safari
media-exit-fullscreen-button {{Non-standard_Inline}} {{EmbedLiveSample("sampleMediaExitFullscreenButton",100,50,"","", "nobutton")}} Chrome Safari
media-fullscreen-volume-slider {{Non-standard_Inline}} {{EmbedLiveSample("sample-media-fullscreen-volume-slider",100,50,"","","nobutton")}} Safari
media-fullscreen-volume-slider-thumb {{Non-standard_Inline}} {{EmbedLiveSample("sample-media-fullscreen-volume-slider-thumb",100,50,"","","nobutton")}} Safari
media-mute-button {{Non-standard_Inline}} {{EmbedLiveSample("sampleMediaMuteButton",100,50,"","", "nobutton")}} Chrome Safari Edge
media-play-button {{Non-standard_Inline}} {{EmbedLiveSample("sampleMediaPlayButton",100,50,"","", "nobutton")}} Chrome Safari Edge
media-overlay-play-button {{Non-standard_Inline}} {{EmbedLiveSample("sampleMediaOverlayPlayButton",100,50,"","", "nobutton")}} Chrome Safari
media-return-to-realtime-button {{Non-standard_Inline}} {{EmbedLiveSample("sample-media-return-to-realtime-button",100,50,"","","nobutton")}} Safari
media-rewind-button {{Non-standard_Inline}} {{EmbedLiveSample("sample-media-rewind-button",100,50,"","","nobutton")}} Safari
media-seek-back-button {{Non-standard_Inline}} {{EmbedLiveSample("sample-media-seek-back-button",100,50,"","","nobutton")}} Safari Edge
media-seek-forward-button {{Non-standard_Inline}} {{EmbedLiveSample("sample-media-seek-forward-button",100,50,"","","nobutton")}} Safari Edge
media-toggle-closed-captions-button {{Non-standard_Inline}} {{EmbedLiveSample("sampleMediaToggleClosedCaptionsButton",100,50,"","", "nobutton")}} Chrome Safari
media-slider {{Non-standard_Inline}} {{EmbedLiveSample("sampleMediaSlider",100,50,"","", "nobutton")}} Chrome Safari Edge
media-sliderthumb {{Non-standard_Inline}} {{EmbedLiveSample("sampleMediaSliderThumb",100,50,"","", "nobutton")}} Chrome Safari Edge
media-volume-slider-container {{Non-standard_Inline}} {{EmbedLiveSample("sampleMediaVolumeSliderContainer",100,50,"","", "nobutton")}} Chrome Safari
media-volume-slider-mute-button {{Non-standard_Inline}} {{EmbedLiveSample("sample-media-volume-slider-mute-button",100,50,"","","nobutton")}} Safari
media-volume-slider {{Non-standard_Inline}} {{EmbedLiveSample("sampleMediaVolumeSlider",100,50,"","", "nobutton")}} Chrome Safari
media-volume-sliderthumb {{Non-standard_Inline}} {{EmbedLiveSample("sampleMediaVolumeSliderThumb",100,50,"","", "nobutton")}} Chrome Safari
media-controls-background {{Non-standard_Inline}} {{EmbedLiveSample("sampleMediaControlsBackground",100,50,"","", "nobutton")}} Chrome Safari
media-controls-dark-bar-background {{Non-standard_Inline}} {{EmbedLiveSample("sample-media-controls-dark-bar-background",100,50,"","","nobutton")}} Safari
media-controls-fullscreen-background {{Non-standard_Inline}} {{EmbedLiveSample("sampleMediaControlsFullscreenBackground",100,50,"","", "nobutton")}} Chrome Safari
media-controls-light-bar-background {{Non-standard_Inline}} {{EmbedLiveSample("sample-media-controls-light-bar-background",100,50,"","","nobutton")}} Safari
media-current-time-display {{Non-standard_Inline}} {{EmbedLiveSample("sampleMediaCurrentTimeDisplay",100,50,"","", "nobutton")}} Chrome Safari
media-time-remaining-display {{Non-standard_Inline}} {{EmbedLiveSample("sampleMediaTimeRemainingDisplay",100,50,"","", "nobutton")}} Chrome Safari
menuarrow {{Non-standard_Inline}} {{EmbedLiveSample("sampleMenuArrow",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64
menubar {{Non-standard_Inline}} {{EmbedLiveSample("sampleMenubar",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64
menucheckbox {{Non-standard_Inline}} {{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64
menuimage {{Non-standard_Inline}} {{EmbedLiveSample("sampleMenuImage",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64
menuitem {{Non-standard_Inline}} {{EmbedLiveSample("sampleMenuItem",100,50,"","", "nobutton")}} 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 {{Non-standard_Inline}} {{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64
menulist {{Non-standard_Inline}} {{EmbedLiveSample("sampleMenuList",100,50,"","", "nobutton")}} Firefox Chrome Safari Edge
menulist-button {{Non-standard_Inline}} {{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}} Firefox Chrome Safari Edge L'élément est mis en forme comme un bouton indicant qu'un menu peut être ouvert.
menulist-text {{Non-standard_Inline}} {{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}} Firefox Chrome Safari Edge
menulist-textfield {{Non-standard_Inline}} {{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}} 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 {{Non-standard_Inline}} {{EmbedLiveSample("sampleMenuPopup",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64
menuradio {{Non-standard_Inline}} {{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64
menuseparator {{Non-standard_Inline}} {{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64
meter {{EmbedLiveSample("sampleMeter",100,50,"","", "nobutton")}}

Chrome Safari Firefox

Apparu avec Fx 64
meterbar {{Non-standard_Inline}} {{EmbedLiveSample("sampleMeterbar",100,50,"","", "nobutton")}} Firefox Apparu avec Fx 16. Utiliser la valeur meter à la place.
meterchunk {{Non-standard_Inline}} {{EmbedLiveSample("sampleMeterchunk",100,50,"","", "nobutton")}} Firefox Apparu avec Fx 16. Retiré avec Fx 64.
number-input {{Non-standard_Inline}} {{EmbedLiveSample("sampleNumberInput",100,50,"","", "nobutton")}} Firefox
progress-bar {{EmbedLiveSample("sampleProgressBarWebkit",100,50,"","", "nobutton")}} Chrome Safari FIrefox Apparu avec Fx 64
progress-bar-value {{Non-standard_Inline}} {{EmbedLiveSample("sampleProgressBarValueWebkit",100,50,"","", "nobutton")}} Chrome Safari
progressbar {{Non-standard_Inline}} {{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}} Firefox L'élément est mis en forme comme une barre de progression. On utilisera progress-bar à la place.
progressbar-vertical {{Non-standard_Inline}} {{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}} Firefox
progresschunk {{Non-standard_Inline}} {{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
progresschunk-vertical {{Non-standard_Inline}} {{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
push-button {{Non-standard_Inline}} {{EmbedLiveSample("samplePushButton",100,50,"","", "nobutton")}} Chrome Safari Edge
radio {{Non-standard_Inline}} {{EmbedLiveSample("sampleRadio",100,50,"","", "nobutton")}} Firefox Chrome Safari Edge L'élément est dessiné comme un bouton radio. Seule la partie correspondant au bouton est incluse.
radio-container {{Non-standard_Inline}} {{EmbedLiveSample("sampleRadioContainer",100,50,"","", "nobutton")}} 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 {{Non-standard_Inline}} {{EmbedLiveSample("sampleRadioLabel",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
radiomenuitem {{Non-standard_Inline}} {{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
range {{Non-standard_Inline}} {{EmbedLiveSample("sampleRange",100,50,"","", "nobutton")}} Firefox
range-thumb {{Non-standard_Inline}} {{EmbedLiveSample("sampleRangeThumb",100,50,"","", "nobutton")}} Firefox
rating-level-indicator {{Non-standard_Inline}} {{EmbedLiveSample("sample-rating-level-indicator",100,50,"","","nobutton")}} Safari
resizer {{Non-standard_Inline}} {{EmbedLiveSample("sampleResizer",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 63
resizerpanel {{Non-standard_Inline}} {{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 63.
scale-horizontal {{Non-standard_Inline}} {{EmbedLiveSample("sampleScaleHorizontal",100,50,"","", "nobutton")}} Firefox
scalethumbend {{Non-standard_Inline}} {{EmbedLiveSample("sampleThumbEnd",100,50,"","", "nobutton")}} Firefox
scalethumb-horizontal {{Non-standard_Inline}} {{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}} Firefox
scalethumbstart {{Non-standard_Inline}} {{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}} Firefox
scalethumbtick {{Non-standard_Inline}} {{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}} Firefox
scalethumb-vertical {{Non-standard_Inline}} {{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}} Firefox
scale-vertical {{Non-standard_Inline}} {{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}} Firefox
scrollbarbutton-down {{Non-standard_Inline}} {{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 63.
scrollbarbutton-left {{Non-standard_Inline}} {{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 63.
scrollbarbutton-right {{Non-standard_Inline}} {{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 63.
scrollbarbutton-up {{Non-standard_Inline}} {{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 63.
scrollbarthumb-horizontal {{Non-standard_Inline}} {{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}} Firefox
scrollbarthumb-vertical {{Non-standard_Inline}} {{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}} Firefox
scrollbartrack-horizontal {{Non-standard_Inline}} {{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}} Firefox
scrollbartrack-vertical {{Non-standard_Inline}} {{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}} Firefox
searchfield {{Non-standard_Inline}} {{EmbedLiveSample("sampleSearchField",100,50,"","", "nobutton")}} Firefox Chrome Safari Edge
searchfield-decoration {{Non-standard_Inline}} {{EmbedLiveSample("sample-searchfield-decoration",100,50,"","","nobutton")}} Safari Edge
searchfield-results-decoration {{Non-standard_Inline}} {{EmbedLiveSample("sample-searchfield-results-decoration",100,50,"","","nobutton")}} Safari Edge
searchfield-results-button {{Non-standard_Inline}} {{EmbedLiveSample("sample-searchfield-results-button",100,50,"","","nobutton")}} Safari Edge
searchfield-cancel-button {{Non-standard_Inline}} {{EmbedLiveSample("sampleSearchFieldCancelButton",100,50,"","", "nobutton")}} Chrome Safari Edge
snapshotted-plugin-overlay {{Non-standard_Inline}} {{EmbedLiveSample("sample-snapshotted-plugin-overlay",100,50,"","","nobutton")}} Safari
separator {{Non-standard_Inline}} {{EmbedLiveSample("sampleSeparator",100,50,"","", "nobutton")}} Firefox

Retiré avec Fx 64.
sheet {{Non-standard_Inline}} {{EmbedLiveSample("sampleSheet",100,50,"","", "nobutton")}} None
slider-horizontal {{Non-standard_Inline}} {{EmbedLiveSample("sampleSliderHorizontal",100,50,"","", "nobutton")}} Chrome Safari Edge
slider-vertical {{Non-standard_Inline}} {{EmbedLiveSample("sampleSliderVertical",100,50,"","", "nobutton")}} Chrome Safari Edge
sliderthumb-horizontal {{Non-standard_Inline}} {{EmbedLiveSample("sampleSliderThumbHorizontal",100,50,"","", "nobutton")}} Chrome Safari Edge
sliderthumb-vertical {{Non-standard_Inline}} {{EmbedLiveSample("sampleSliderThumbVertical",100,50,"","", "nobutton")}} Chrome Safari Edge
spinner {{Non-standard_Inline}} {{EmbedLiveSample("sampleSpinner",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
spinner-downbutton {{Non-standard_Inline}} {{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
spinner-textfield {{Non-standard_Inline}} {{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
spinner-upbutton {{Non-standard_Inline}} {{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
splitter {{Non-standard_Inline}} {{EmbedLiveSample("sampleSplitter",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
square-button {{Non-standard_Inline}} {{EmbedLiveSample("sampleSquareButton",100,50,"","", "nobutton")}} Chrome Safari Edge
statusbar {{Non-standard_Inline}} {{EmbedLiveSample("sampleStatusBar",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
statusbarpanel {{Non-standard_Inline}} {{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
tab {{Non-standard_Inline}} {{EmbedLiveSample("sampleTab",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64
tabpanel {{Non-standard_Inline}} {{EmbedLiveSample("sampleTabPanel",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
tabpanels {{Non-standard_Inline}} {{EmbedLiveSample("sampleTabPanels",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64
tab-scroll-arrow-back {{Non-standard_Inline}} {{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
tab-scroll-arrow-forward {{Non-standard_Inline}} {{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
textarea {{EmbedLiveSample("sampleTextArea",100,50,"","", "nobutton")}} Firefox Chrome Safari Edge
textfield {{Non-standard_Inline}} {{EmbedLiveSample("sampleTextField",100,50,"","", "nobutton")}} Firefox Chrome Safari Edge
textfield-multiline {{Non-standard_Inline}} {{EmbedLiveSample("sampleTextfieldMultiline",100,50,"","", "nobutton")}} Firefox Utiliser textarea à la place de cette valeur.
toolbar {{Non-standard_Inline}} {{EmbedLiveSample("sampleToolbar",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
toolbarbutton {{Non-standard_Inline}} {{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
toolbarbutton-dropdown {{Non-standard_Inline}} {{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
toolbargripper {{Non-standard_Inline}} {{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
toolbox {{Non-standard_Inline}} {{EmbedLiveSample("sampleToolbox",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
tooltip {{Non-standard_Inline}} {{EmbedLiveSample("sampleTooltip",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
treeheader {{Non-standard_Inline}} {{EmbedLiveSample("sampleTreeHeader",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
treeheadercell {{Non-standard_Inline}} {{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
treeheadersortarrow {{Non-standard_Inline}} {{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
treeitem {{Non-standard_Inline}} {{EmbedLiveSample("sampleTreeItem",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
treeline {{Non-standard_Inline}} {{EmbedLiveSample("sampleTreeLine",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
treetwisty {{Non-standard_Inline}} {{EmbedLiveSample("sampleTreeTwisty",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
treetwistyopen {{Non-standard_Inline}} {{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
treeview {{Non-standard_Inline}} {{EmbedLiveSample("sampleTreeView",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
relevancy-level-indicator {{Non-standard_Inline}} {{EmbedLiveSample("sample-relevancy-level-indicator",100,50,"","","nobutton")}} Safari
-moz-win-borderless-glass {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("2.0")}} {{EmbedLiveSample("sampleWinBorderlessGlass",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64. Ce style applique l'effet Aero Glass sans bordure sur l'élément.
-moz-win-browsertabbar-toolbox {{Non-standard_Inline}} {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}} 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 {{Non-standard_Inline}} {{EmbedLiveSample("sampleWinCommunicationstext",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
-moz-win-communications-toolbox {{Non-standard_Inline}} {{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}} 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 {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("6.0")}} {{EmbedLiveSample("sampleWinExcludeGlass",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64. Ce style permet d'exclure l'effet Aero Glass sur l'élément.
-moz-win-glass {{Non-standard_Inline}} {{EmbedLiveSample("sampleWinGlass",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64. Ce style permet d'appliquer l'effet Aero Glass sur l'élément.
-moz-win-media-toolbox {{Non-standard_Inline}} {{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}} 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 {{Non-standard_Inline}} {{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
-moz-window-button-box-maximized {{Non-standard_Inline}} {{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
-moz-window-button-close {{Non-standard_Inline}} {{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
-moz-window-button-maximize {{Non-standard_Inline}} {{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
-moz-window-button-minimize {{Non-standard_Inline}} {{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
-moz-window-button-restore {{Non-standard_Inline}} {{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
-moz-window-frame-bottom {{Non-standard_Inline}} {{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
-moz-window-frame-left {{Non-standard_Inline}} {{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
-moz-window-frame-right {{Non-standard_Inline}} {{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
-moz-window-titlebar {{Non-standard_Inline}} {{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
-moz-window-titlebar-maximized {{Non-standard_Inline}} {{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50,"","", "nobutton")}} Firefox Retiré avec Fx 64.
-apple-pay-button {{Non-standard_Inline}} {{EmbedLiveSample("sampleApplePayButton",100,50,"","", "nobutton")}} Safari iOS et macOS uniquement. Disponible depuis iOS 10.1 et macOS 10.12.1

Syntaxe formelle

{{CSSSyntax}}

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
{{SpecName('CSS3 Basic UI', "#appearance-switching", "appearance")}} {{Spec2('CSS3 Basic UI')}} Définition initiale.

{{cssinfo}}

Compatibilité des navigateurs

{{Compat("css.properties.appearance")}}

Voir aussi