diff options
Diffstat (limited to 'files/fr/web/css/_doublecolon_-moz-range-progress/index.md')
| -rw-r--r-- | files/fr/web/css/_doublecolon_-moz-range-progress/index.md | 42 |
1 files changed, 19 insertions, 23 deletions
diff --git a/files/fr/web/css/_doublecolon_-moz-range-progress/index.md b/files/fr/web/css/_doublecolon_-moz-range-progress/index.md index 1b7167364e..e74d283b5e 100644 --- a/files/fr/web/css/_doublecolon_-moz-range-progress/index.md +++ b/files/fr/web/css/_doublecolon_-moz-range-progress/index.md @@ -1,16 +1,12 @@ --- title: '::-moz-range-progress' slug: Web/CSS/::-moz-range-progress -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference translation_of: Web/CSS/::-moz-range-progress +browser-compat: css.selectors.-moz-range-progress --- {{CSSRef}}{{Non-standard_header}} -Le pseudo-élément **`::-moz-range-progress`** représente la portion de la piste d'un élément {{HTMLElement("input")}} de type `range`, qui correspond aux valeurs inférieures à la valeur sélectionnée par le curseur. +Le pseudo-élément **`::-moz-range-progress`** représente la portion de la piste d'un élément [`<input>`](/fr/docs/Web/HTML/Element/Input) de type `range`, qui correspond aux valeurs inférieures à la valeur sélectionnée par le curseur. > **Note :** Si `::-moz-range-progress` est utilisé sur autre chose qu'un élément `<input type="range">`, il n'aura aucun effet. @@ -20,28 +16,28 @@ Le pseudo-élément **`::-moz-range-progress`** représente la portion de la pis ## Exemples +### HTML + +```html +<input type="range" min="0" max="100" step="5" value="50"/> +``` + ### CSS ```css input[type=range]::-moz-range-progress { - background-color: green; + background-color: green; height: 1em; } ``` -### HTML - -```html -<input type="range" min="0" max="100" step="5" value="50"/> -``` - ### Résultat -{{EmbedLiveSample("Exemples", 300, 50)}} +{{EmbedLiveSample("", 300, 50)}} -Une barre de progression mise en forme avec cette déclaration devrait ressembler à : +Une barre de progression mise en forme avec cette déclaration devrait ressembler à : - + ## Spécifications @@ -49,15 +45,15 @@ Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla ## Compatibilité des navigateurs -{{Compat("css.selectors.-moz-range-progress")}} +{{Compat}} ## Voir aussi -- Les pseudo-éléments de Gecko qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("input")}} de type `range` : +- Les pseudo-éléments de Gecko qui permettent de mettre en forme les autres parties des éléments [`<input>`](/fr/docs/Web/HTML/Element/Input) de type `range` : - - {{cssxref("::-moz-range-thumb")}} - - {{cssxref("::-moz-range-track")}} + - [`::-moz-range-thumb`](/fr/docs/Web/CSS/::-moz-range-thumb) + - [`::-moz-range-track`](/fr/docs/Web/CSS/::-moz-range-track) -- {{cssxref("::-ms-fill-upper")}} pris en charge par Internet Explorer et Ege -- [CSS-Tricks : Gérer des champs `input` de type `range` de façon compatible entre les navigateurs (en anglais)](https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/) -- [QuirksMode : Mettre en forme les pistes et curseurs](https://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html) +- [`::-ms-fill-upper`](/fr/docs/Web/CSS/::-ms-fill-upper) pris en charge par Internet Explorer +- [CSS-Tricks : Gérer des champs `input` de type `range` de façon compatible entre les navigateurs (en anglais)](https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/) +- [QuirksMode : Mettre en forme les pistes et curseurs (en anglais)](https://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html) |