::-moz-progress-bar

Este articulo necesita una revisión técnica. Cómo puedes ayudar.

No estándar
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.

Resumen

El  pseudo-elemento  CSS ::-moz-progress-bar se aplica al área del elemento HTML <progress> que sirve para representar la cantidad de progreso que se ha realizada hasta el momento dado. Te permite, por ejemplo, cambiar el color de la barra de progreso.

Hay bastantes posibilidades de dar diferentes estilos a la barra. Esto puede ser especialmente útil con barras indeterminadas(via la  pseudo-class :indeterminate ), si es que quieres cambiar de manera sustancial la apariencia por defecto; se puede cambiar, por ejemplo, la anchura y la posición de la barra. (Esto probablemente signifique que nos referimos al conjunto completo de las dimensiones del elemento, no sólo a la parte pintada del elemento, tal y como se muestra en el pantallazo que se puede ver más abajo.)

Síntaxis

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

Ejemplo

En este ejemplo, en la barra de progreso que tiene como ID "redbar", el progreso realizado hasta el momento se mostraría en rojo.

HTML

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

CSS

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

Resultado

Un barra que use este estilo sería similar a la siguiente:

Custom styled progress bar

Ver además

Etiquetas y colaboradores del documento

 Colaboradores en esta página: pekechis
 Última actualización por: pekechis,