::-moz-range-progress

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-range-progress representa la parte del "camino" (la ranura sobre la que desliza) de un elemento  <input> con type="range", que se corresponde con los valores inferiores al valor seleccionado actualmente en ese "camino".

Si usamos  ::-moz-range-progress con cualquier otra cosa que no sea  <input type="range"> ni seleccionaremos nada ni conseguiremos ningún efecto.

Síntaxis

::-moz-range-progress

Ejemplo

Contenido CSS

input[type=range]::-moz-range-progress {
  background-color: green;
  height: 1em;
}

Contenido HTML

<input type="range" min="0" max="100" step="5" value="50"/>

Salida

Una barra de progreso que utilice este estilo se vería de la siguiente manera:

Especificaciones

No es parte de ninguna especificación. Es un pseudo-elemento propietario de Gecko.

Compatibilidad con los distintos navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Característica Firefox (Gecko) Chrome Internet Explorer Opera Safari
Soporte básico (Yes) Sin soporte Sin soporte Sin soporte Sin soporte
Característica Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Soporte básico (Yes) Sin soporte Sin soporte Sin soporte Sin soporte

Ver además