::-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
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
- El pseudo-elements que usa Gecko para dar estilo a otras parte de un input con type="range":
::-ms-fill-upper
- CSS-Tricks: Dando estilo con CSS a input con type="range" en todos los navegadores.
- QuirksMode: Dando estilo y usando scripts para elementos deslizantes.