::-moz-progress-bar

Non standard
Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

Le pseudo-élément ::-moz-progress-bar s'appliquant à la zone d'élément HTML <progress> représente la valeur de la progression effectuée jusqu'à présent. Vous pourrez par exemple, modifier la couleur de la barre de progression.

Le style de barre offre d'assez larges possibilités. Cela peut être particulièrement utile avec des barres de durée indéterminée (via la pseudo-classe :indeterminate), où vous pouvez modifier substantiellement l'apparence par défaut. Vous pourrez par exemple modifier sa largeur et son positionnement (nous entendons par là les dimensions et la position globales de l'élément, et pas seulement la partie peinte de l'élément, tel que représenté dans la capture d'écran ci-dessous).

Syntaxe

::-moz-progress-bar { style properties }

Exemples

CSS

#redbar::-moz-progress-bar {
  background-color: red;
}

HTML

<progress id="redbar" value="30" max="100">30 %</progress>

Résultat

Une barre de progression mise en forme de cette façon devrait ressembler à :

Custom styled progress bar

Spécifications

Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, teoli, Goofy, FredB, Delapouite, Zimmermann_Geoffrey
 Dernière mise à jour par : SphinxKnight,