From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/appearance/index.html | 2677 ++++++++++++++++++++++++++++++++ 1 file changed, 2677 insertions(+) create mode 100644 files/fr/web/css/appearance/index.html (limited to 'files/fr/web/css/appearance') diff --git a/files/fr/web/css/appearance/index.html b/files/fr/web/css/appearance/index.html new file mode 100644 index 0000000000..a8bc485e09 --- /dev/null +++ b/files/fr/web/css/appearance/index.html @@ -0,0 +1,2677 @@ +--- +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 :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValeurDémonstrationNavigateurDescription
none + + {{EmbedLiveSample("sampleNone",100,50,"","", "nobutton")}}Firefox Chrome Safari EdgeAucune 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")}}AucunL'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 EdgeL'é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")}}FirefoxRetiré avec Fx 64
button-arrow-previous {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64
button-arrow-up {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}}FirefoxRetiré 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")}}FirefoxRetiré 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 EdgeL'é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")}}FirefoxL'é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")}}Safariinput 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")}}FirefoxRetiré avec Fx 64
groupbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleGroupbox",100,50,"","", "nobutton")}}FirefoxRetiré 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")}}SafariListe 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")}}FirefoxRetiré avec Fx 64
menubar {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenubar",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64
menucheckbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64
menuimage {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuImage",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64
menuitem {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuItem",100,50,"","", "nobutton")}}FirefoxRetiré 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")}}FirefoxRetiré 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 EdgeL'é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 EdgeL'é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")}}FirefoxRetiré avec Fx 64
menuradio {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64
menuseparator {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}}FirefoxRetiré 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")}}FirefoxApparu avec Fx 16. Utiliser la valeur meter à la place.
meterchunk {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMeterchunk",100,50,"","", "nobutton")}}FirefoxApparu 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 FIrefoxApparu 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")}}FirefoxL'é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")}}FirefoxRetiré avec Fx 64.
progresschunk-vertical {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}}FirefoxRetiré 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 EdgeL'é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")}}FirefoxRetiré 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")}}FirefoxRetiré avec Fx 64.
radiomenuitem {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}}FirefoxRetiré 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")}}FirefoxRetiré avec Fx 63
resizerpanel {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}}FirefoxRetiré 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")}}FirefoxRetiré avec Fx 63.
scrollbarbutton-left {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 63.
scrollbarbutton-right {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 63.
scrollbarbutton-up {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}}FirefoxRetiré 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")}}FirefoxRetiré avec Fx 64.
spinner-downbutton {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
spinner-textfield {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
spinner-upbutton {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
splitter {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSplitter",100,50,"","", "nobutton")}}FirefoxRetiré 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")}}FirefoxRetiré avec Fx 64.
statusbarpanel {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
tab {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTab",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64
tabpanel {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTabPanel",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
tabpanels {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTabPanels",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64
tab-scroll-arrow-back {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
tab-scroll-arrow-forward {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}}FirefoxRetiré 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")}}FirefoxUtiliser textarea à la place de cette valeur.
toolbar {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleToolbar",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
toolbarbutton {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
toolbarbutton-dropdown {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
toolbargripper {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
toolbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleToolbox",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
tooltip {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTooltip",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
treeheader {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeHeader",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
treeheadercell {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
treeheadersortarrow {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
treeitem {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeItem",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
treeline {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeLine",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
treetwisty {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeTwisty",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
treetwistyopen {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
treeview {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeView",100,50,"","", "nobutton")}}FirefoxRetiré 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")}}FirefoxRetiré 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")}}FirefoxRetiré 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")}}FirefoxRetiré avec Fx 64.
-moz-win-communications-toolbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}}FirefoxRetiré 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")}}FirefoxRetiré 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")}}FirefoxRetiré 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")}}FirefoxRetiré 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")}}FirefoxRetiré avec Fx 64.
-moz-window-button-box-maximized {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
-moz-window-button-close {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
-moz-window-button-maximize {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
-moz-window-button-minimize {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
-moz-window-button-restore {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
-moz-window-frame-bottom {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
-moz-window-frame-left {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
-moz-window-frame-right {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
-moz-window-titlebar {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
-moz-window-titlebar-maximized {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
-apple-pay-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleApplePayButton",100,50,"","", "nobutton")}}SafariiOS 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ÉtatCommentaires
{{SpecName('CSS3 Basic UI', "#appearance-switching", "appearance")}}{{Spec2('CSS3 Basic UI')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf