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-track representa la trayectoría, es decir la ranura sobre la cual se desliza el indicador de un <input> con type="range".
Si usamos ::-moz-range-track con cualquier otra cosa que no sea un <input type="range"> ni seleccionaremos nada ni se mostrará efecto alguno.
Síntaxis
::-moz-range-track
Ejemplo
Contenido CSS
input[type=range]::-moz-range-track {
background-color: green;
}
Contenido HTML
<input type="range" min="0" max="100" step="5" value="50"/>
Salida
Un barra de progreso con ese estilo tendrá una apariencia similar a la siguiente:
Especificaciones
No es parte de ninguna especificación. Es un pseudo-elemento propietario específico del motor 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
- Los pseudo-elementos usados por Gecko para proporcionar estilos a las distintas partes de un input con type="range":
::-moz-range-thumb, el cursor deslizándose sobre la ranura.::-moz-range-progress
- Pseudo-elementos similares en otros navegadores:
::-webkit-slider-runnable-track, pseudo-elemento soportado por WebKit y Blink (Safari, Chrome and Opera).::-ms-track, pseudo-elemento soportado por Internet Explorer y Edge.
- CSS-Tricks: Dando estilo con CSS a elementos Input con type="range" para que se muestren correctamente en todos los navegadores.
- QuirksMode: Dando estilos y scripting a elementos deslizantes