From ffc1c18ba7f546ef8103ad587592a2cfaf88e609 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Mon, 17 May 2021 14:59:47 -0400 Subject: clean up live samples in CSS/appearance (#899) * clean up live samples in CSS/appearance * Update vs. en-US counterpart Co-authored-by: julieng --- files/fr/web/css/appearance/index.html | 2485 +++----------------------------- 1 file changed, 197 insertions(+), 2288 deletions(-) (limited to 'files/fr/web') diff --git a/files/fr/web/css/appearance/index.html b/files/fr/web/css/appearance/index.html index feb8aad1be..1de60de406 100644 --- a/files/fr/web/css/appearance/index.html +++ b/files/fr/web/css/appearance/index.html @@ -1,14 +1,19 @@ --- -title: 'appearance (-moz-appearance, -webkit-appearance)' +title: appearance (-moz-appearance, -webkit-appearance) slug: Web/CSS/appearance tags: + - '-moz-appearance' + - '-webkit-appearance' - CSS - - Non-standard - - Propriété + - CSS Basic User Interface + - CSS Property - Reference + - appearance + - recipe:css-property translation_of: Web/CSS/appearance +browser-compat: css.properties.appearance --- -
{{CSSRef}}{{SeeCompatTable}}
+
{{CSSRef}}

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.

@@ -18,2619 +23,524 @@ translation_of: Web/CSS/appearance -

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.

+

Cette propriété était 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.

+

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

+

Syntaxe

-
/* Valeurs pour la spécification CSS Basic User Interface Module Level 4 */
+
/* Valeurs spécifiées par le module CSS Basic User Interface de niveau 4 */
 appearance: none;
 appearance: auto;
-appearance: button;
+appearance: menulist-button;
 appearance: textfield;
+
+/* Valeurs ayant le même effet que 'auto' */
+appearance: button;
 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 */
+/* Liste partielle des valeurs disponibles pour Gecko */
 -moz-appearance: scrollbarbutton-up;
--moz-appearance: button-bevel;
+-moz-appearance: button-bevel;
 
-/* Liste des valeurs disponibles pour WebKit/Blink (ainsi que pour Gecko et Edge) */
--webkit-appearance: media-mute-button;
+/* Liste partielle des valeurs disponibles pour WebKit/Blink (ainsi que pour Gecko et Edge) */
+-webkit-appearance: media-mute-button;
 -webkit-appearance: caret;
 

 
-
Valeurs

+
Valeurs

 
-
<appearance> est l’une des valeurs suivantes :

+
Mots-clés standard

 
 
-   
-   
-   
+   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
+   
+   
+   
-   
-   
-   
-   
+   
+   
+   
-   
-   
+   
-   
+   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
+   
-   
-   
-   
-   
+   
+   
+   
-   
-   
-   
-   
+   
+   
+   
-   
-   
+   
-   
-   
-   
-   
+   
+   
+   
-   
-   
-   
+   
+   
-   
-   
-   
+   
+   
-   
-   
+   
+   
+   
+  
+  
+   
-   
+   
-   
-   
-   
-   
+   
+   
+   
-   
-   
-   
+   
+   
-   
-   
-   
+   
+   
-   
-   
+   
+   
+  
+ 
+

  
   

    ValeurDémonstration
    Navigateur
    Description
   

   

    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.Aucune mise en forme particulière n'est appliquée. C'est la valeur 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")}}SafariautoFirefox ChromeL'agent utilisateur sélectionne la mise en forme spécifique appropriée en fonction de l'élément. Cette valeur agira comme none pour les éléments sans mise en forme spéciale.
   

   
borderless-attachment {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sample-borderless-attachment",100,50,"","","nobutton")}}Safarimenulist-buttonFirefox Chrome Safari EdgeL'élément est mis en forme comme un bouton qui indiquerait qu'un menu pourrait être ouvert.
   

   
button {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleButton",100,50,"","", "nobutton")}}textfield
    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 64Les valeurs suivantes sont traitées de façon équivalente à auto:
   

   
button-arrow-previous {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64buttonFirefox Chrome Safari EdgeL'élément est dessiné comme un bouton.
   

   
button-arrow-up {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64checkboxFirefox Chrome Safari EdgeL'élément est dessiné comme une case à cocher (et n'inclut que la case à cocher).
   

   
button-bevel {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}}listbox
    Firefox Chrome Safari Edge
    
   

   
button-focus {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64menulistFirefox Chrome Safari Edge
   

   
caps-lock-indicator {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sample-caps-lock-indicator",100,50,"","","nobutton")}}Safari EdgemeterChrome Safari Firefox
    
   

   
caret {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleCaret",100,50,"","", "nobutton")}}Firefox Chrome Safari Edgeprogress-barChrome Safari Firefox
    
   

   
checkbox {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleCheckbox",100,50,"","", "nobutton")}}push-buttonChrome Safari Edge
radio
    Firefox Chrome Safari EdgeL'élément est dessiné comme une case à cocher (seule la partie correspondant à la case est incluse).L'élément est dessiné comme un bouton radio (et n'inclut que la portion liée au « bouton radio »).
   

   
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.searchfieldFirefox Chrome Safari Edge
   

   
checkbox-label {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}}Firefoxslider-horizontalChrome Safari Edge
    
   

   
checkmenuitem {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}}Firefoxsquare-buttonChrome Safari Edge
    
   

   
color-well {{Non-standard_Inline}}
-    textareaFirefox Chrome Safari Edge

+
+
Mots-clés non-standards

 
-    
-<div>Lorem</div>

-    
-    {{EmbedLiveSample("sample-color-well",100,50,"","","nobutton")}}
+
Les valeurs suivantes sont uniquement implémentées pour l'une ou l'autre des propriétés préfixées mais pas pour la propriété standard appearance.

+
+
+ 
+  
+   
+   
+   
+  
+  
+   
-   
+   
-   
-   
+   
-   
-   
+   
+   
+   
+  
+  
+   
-   
-   
-   
+   
+   
-   
-   
+   
-   
+   
-   
-   
+   
-   
+   
-   
-   
-   
+   
+   
-   
-   
+   
+   
+   
+  
+  
+   
-   
-   
+   
+   
+   
+  
+  
+   
-   
+   
-   
-   
-   
+   
+   
-   
-   
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
-   
-   
+   
-   
-   
+   
-   
-   
+   
-   
-   
+   
-   
-   
+   
-   
-   
+   
-   
-   
+   
-   
-   
+   
-   
-   
+   
-   
-   
+   
-   
-   
+   
-   
-   
+   
-   
-   
+   
-   
-   
+   
-   
-   
+   
-   
-   
+   
-   
-   
+   
-   
-   
+   
-   
-   
+   
-   
-   
+   
-   
-   
+   
-   
-   
+   
-   
-   
+   
-   
-   
+   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
+   
-   
-   
+   
-   
-  
-  
-   
-   
-   
-   
+   
-   
-   
+   
-   
+   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
+   
-   
-   
-   
-   
-  
-  
-   
-   
+   
-   
-   
+   
-   
+   
-   
-   
+   
-   
-   
-   
-   
-  
-  
-   
-   
+   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
+   
-   
-   
-   
+   
+   
-   
-   
+   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
+   
-   
-   
+   
-   
-   
+   
-   
-   
+   
-   
-   
+   
-   
-   
+   
-   
-   
+   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
+   
-   
-   
+   
-   
-   
+   
-   
-   
+   
-   
-   
-   
-   
-  
-  
-   
-   
+   
-   
-   
-   
-   
+   
+   
+   
-   
-   
+   
-   
-   
+   
-   
-   
+   
-   
-   
-   
-   
-  
-  
-   
-   
+   
-   
-   
+   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
+   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
+   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
+   
-   
+   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
+   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
+   
ValeurNavigateurDescription
attachment
    Safariinput type=color
   

   
continuous-capacity-level-indicator {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sample-continuous-capacity-level-indicator",100,50,"","","nobutton")}}borderless-attachment
    Safari
    
   

   
default-button {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sample-default-button",100,50,"","","nobutton")}}button-bevelFirefox Chrome Safari Edge
caps-lock-indicator
    Safari Edge
    
   

   
discrete-capacity-level-indicator {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sample-discrete-capacity-level-indicator",100,50,"","","nobutton")}}SafaricaretFirefox Chrome Safari Edge
    
   

   
dualbutton {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleDualButton",100,50,"","", "nobutton")}}checkbox-container
    FirefoxRetiré avec Fx 64L'élément est dessiné comme le conteneur d'une case à cocher. Il pourra inclure un effet d'arrière-plan sur certaines plateformes. Normalement, il devrait contenir un libellé et une case à cocher.
   

   
groupbox {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleGroupbox",100,50,"","", "nobutton")}}checkbox-label
    FirefoxRetiré avec Fx 64
   

   
inner-spin-button {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleInnerSpinButton",100,50,"","", "nobutton")}}Firefox Chrome SafaricheckmenuitemFirefox
    
   

   
image-controls-button {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sample-image-controls-button",100,50,"","","nobutton")}}color-wellSafariinput type=color
continuous-capacity-level-indicator
    Safari
    
   

   
list-button {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sample-list-button",100,50,"","","nobutton")}}default-buttonSafari Edge
discrete-capacity-level-indicator
    SafariListe de données.
   

   
listbox {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleListBox",100,50,"","", "nobutton")}}Firefox Chrome Safari Edgeinner-spin-buttonFirefox Chrome Safari
    
   

   
listitem {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleListItem",100,50,"","", "nobutton")}}image-controls-buttonSafari
list-buttonSafaridatalist
listitem
    Firefox Chrome Safari Edge
    
   

   
media-enter-fullscreen-button {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleMediaEnterFullscreenButton",100,50,"","", "nobutton")}}media-enter-fullscreen-button
    Chrome Safari
    
   

   
media-exit-fullscreen-button {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleMediaExitFullscreenButton",100,50,"","", "nobutton")}}media-exit-fullscreen-button
    Chrome Safari
    
   

   
media-fullscreen-volume-slider {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sample-media-fullscreen-volume-slider",100,50,"","","nobutton")}}media-fullscreen-volume-slider
    Safari
    
   

   
media-fullscreen-volume-slider-thumb {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sample-media-fullscreen-volume-slider-thumb",100,50,"","","nobutton")}}media-fullscreen-volume-slider-thumb
    Safari
    
   

   
media-mute-button {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleMediaMuteButton",100,50,"","", "nobutton")}}media-mute-button
    Chrome Safari Edge
    
   

   
media-play-button {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleMediaPlayButton",100,50,"","", "nobutton")}}media-play-button
    Chrome Safari Edge
    
   

   
media-overlay-play-button {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleMediaOverlayPlayButton",100,50,"","", "nobutton")}}media-overlay-play-button
    Chrome Safari
    
   

   
media-return-to-realtime-button {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sample-media-return-to-realtime-button",100,50,"","","nobutton")}}media-return-to-realtime-button
    Safari
    
   

   
media-rewind-button {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sample-media-rewind-button",100,50,"","","nobutton")}}media-rewind-button
    Safari
    
   

   
media-seek-back-button {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sample-media-seek-back-button",100,50,"","","nobutton")}}media-seek-back-button
    Safari Edge
    
   

   
media-seek-forward-button {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sample-media-seek-forward-button",100,50,"","","nobutton")}}media-seek-forward-button
    Safari Edge
    
   

   
media-toggle-closed-captions-button {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleMediaToggleClosedCaptionsButton",100,50,"","", "nobutton")}}media-toggle-closed-captions-button
    Chrome Safari
    
   

   
media-slider {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleMediaSlider",100,50,"","", "nobutton")}}media-slider
    Chrome Safari Edge
    
   

   
media-sliderthumb {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleMediaSliderThumb",100,50,"","", "nobutton")}}media-sliderthumb
    Chrome Safari Edge
    
   

   
media-volume-slider-container {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleMediaVolumeSliderContainer",100,50,"","", "nobutton")}}media-volume-slider-container
    Chrome Safari
    
   

   
media-volume-slider-mute-button {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sample-media-volume-slider-mute-button",100,50,"","","nobutton")}}media-volume-slider-mute-button
    Safari
    
   

   
media-volume-slider {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleMediaVolumeSlider",100,50,"","", "nobutton")}}media-volume-slider
    Chrome Safari
    
   

   
media-volume-sliderthumb {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleMediaVolumeSliderThumb",100,50,"","", "nobutton")}}media-volume-sliderthumb
    Chrome Safari
    
   

   
media-controls-background {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleMediaControlsBackground",100,50,"","", "nobutton")}}media-controls-background
    Chrome Safari
    
   

   
media-controls-dark-bar-background {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sample-media-controls-dark-bar-background",100,50,"","","nobutton")}}media-controls-dark-bar-background
    Safari
    
   

   
media-controls-fullscreen-background {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleMediaControlsFullscreenBackground",100,50,"","", "nobutton")}}media-controls-fullscreen-background
    Chrome Safari
    
   

   
media-controls-light-bar-background {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sample-media-controls-light-bar-background",100,50,"","","nobutton")}}media-controls-light-bar-background
    Safari
    
   

   
media-current-time-display {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleMediaCurrentTimeDisplay",100,50,"","", "nobutton")}}media-current-time-display
    Chrome Safari
    
   

   
media-time-remaining-display {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleMediaTimeRemainingDisplay",100,50,"","", "nobutton")}}media-time-remaining-display
    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")}}menulist-text
    Firefox Chrome Safari Edge
    
   

   
menulist-textfield {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}}menulist-textfield
    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 64L'élément est mis en forme comme le champ texte d'une liste de menu (non implémenté sur Windows).
   

   
menuradio {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}}meterbar
    FirefoxRetiré avec Fx 64On utilisera meter à la place.
   

   
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")}}number-input
    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")}}progress-bar-value
    Chrome Safari
    
   

   
progressbar {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}}progressbar
    FirefoxL'élément est mis en forme comme une barre de progression. On utilisera progress-bar à la place.Cet élément est mis en forme comme une barre de progression, aussi, on utilisera progress-bar à la place.
   

   
progressbar-vertical {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}}progressbar-vertical
    Firefox
    
   

   
progresschunk {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
progresschunk-vertical {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}}range
    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")}}range-thumb
    Firefox
    
   

   
range-thumb {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleRangeThumb",100,50,"","", "nobutton")}}Firefoxrating-level-indicatorSafari
    
   

   
rating-level-indicator {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sample-rating-level-indicator",100,50,"","","nobutton")}}relevancy-level-indicator
    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")}}scale-horizontal
    Firefox
    
   

   
scalethumbend {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleThumbEnd",100,50,"","", "nobutton")}}scalethumbend
    Firefox
    
   

   
scalethumb-horizontal {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}}scalethumb-horizontal
    Firefox
    
   

   
scalethumbstart {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}}scalethumbstart
    Firefox
    
   

   
scalethumbtick {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}}scalethumbtick
    Firefox
    
   

   
scalethumb-vertical {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}}scalethumb-vertical
    Firefox
    
   

   
scale-vertical {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}}scale-vertical
    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")}}scrollbarthumb-horizontal
    Firefox
    
   

   
scrollbarthumb-vertical {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}}scrollbarthumb-vertical
    Firefox
    
   

   
scrollbartrack-horizontal {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}}scrollbartrack-horizontal
    Firefox
    
   

   
scrollbartrack-vertical {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}}scrollbartrack-vertical
    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")}}searchfield-decoration
    Safari Edge
    
   

   
searchfield-results-decoration {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sample-searchfield-results-decoration",100,50,"","","nobutton")}}Safari Edgesearchfield-results-decorationChrome Safari Edge(Fonctionne sur Chrome 51 sur Windows 7)
   

   
searchfield-results-button {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sample-searchfield-results-button",100,50,"","","nobutton")}}searchfield-results-button
    Safari Edge
    
   

   
searchfield-cancel-button {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleSearchFieldCancelButton",100,50,"","", "nobutton")}}searchfield-cancel-button
    Chrome Safari Edge
    
   

   
snapshotted-plugin-overlay {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sample-snapshotted-plugin-overlay",100,50,"","","nobutton")}}snapshotted-plugin-overlay
    Safari
    
   

   
separator {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleSeparator",100,50,"","", "nobutton")}}Firefox
-    
Retiré avec Fx 64.

-   
sheet {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleSheet",100,50,"","", "nobutton")}}sheet
    None
    
   

   
slider-horizontal {{Non-standard_Inline}}
-    
-    {{EmbedLiveSample("sampleSliderHorizontal",100,50,"","", "nobutton")}}slider-vertical
    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")}}sliderthumb-horizontal
    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")}}sliderthumb-vertical
    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")}}textfield-multiline
    FirefoxRetiré avec Fx 64.On utilisera textarea à la place.
   

   
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")}}-apple-pay-button
    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.1iOS et macOS uniquement. Disponible pour le Web à partir de iOS 10.1 et macOS 10.12.1
   

  
 

 
-
Syntaxe formelle

+
Syntaxe formelle

 
 {{CSSSyntax}}
 
-
Exemples

+
Exemples

 
 
La règle suivante permet que l'élément ait l'apparence d'un bouton d'une barre d'outils :

 
@@ -2641,7 +551,9 @@ div{ color: black;
 }
-

Spécifications

+

Voir également cet exemple JSFiddle qui illustre comment utiliser appearance: none afin d'appliquer une mise en forme spécifique aux boutons radio et aux cases à cocher.

+ +

Spécifications

@@ -2662,16 +574,13 @@ div{ color: black;

{{cssinfo}}

-

Compatibilité des navigateurs

- - +

Compatibilité des navigateurs

-

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

+

{{Compat}}

-

Voir aussi

+

Voir aussi

-- cgit v1.2.3-54-g00ecf