MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

::-moz-progress-bar

This translation is incomplete. Please help translate this article from English.

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

Sumari

El pseudo-element CSS ::-moz-progress-bar s'aplica a l'àrea d'un element HTML <progress> que representa la quantitat de progrés que ha passat fins ara. Això li permet, per exemple, canviar el color de les barres de progrés.

Teniu un potencial bastant ample amb l'estil de la barra. Això pot ser especialment útil amb barres indeterminades (via la pseudo-classe :indeterminate), on es pot canviar substancialment l'aspecte predeterminat; com l'ample i la posició de la barra, per exemple. (Pel que és probable que signifiqui les dimensions de tots els elements i la posició, no només la part pintada de l'element, com es mostra en la següent captura de pantalla).

Sintaxi

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

Exemple

Aquest exemple d'estils, el mesurador de progrés parteix de la barra de progrés amb l'ID redbar amb el color vermell.

HTML

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

CSS

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

Resultat

Una barra utilitzant aquest estil podria ser com això:

Custom styled progress bar

Veure

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,