Deseamos brindarte la mejor solución que hallamos en internet. Nosotros esperamos que te sirva de ayuda y si quieres compartir algo que nos pueda ayudar a perfeccionar nuestra información siéntete libre de hacerlo..
Solución:
input[type='range']
-webkit-appearance: none !important;
background:red;
height:7px;
input[type='range']::-webkit-slider-thumb
-webkit-appearance: none !important;
background:blue;
height:10px;
width:10px;
Si está usando HTML 5, ¿por qué no usar el progress ¿etiqueta?
EDITAR: hoy en día, todos los principales navegadores admiten ambos
-
aporte[type=’range’]
Por eso deberías usar uno de estos dos, como se explica en otras respuestasy esta ya no debería ser la respuesta aceptada.
los es bastante nuevo y ya está intentando personalizarlo con CSS. 🙂
Yo no lo intentaría por dos razones:
-
allí podría haber grandes problemas de compatibilidad ahora y durante los próximos años (o muchos). Piensa que en la actualidad un control de formulario como
(disponible desde que comenzó la web) sigue siendo problemático para personalizarse con CSS de forma cruzada entre navegadores. Por ejemplo, si establece unpaddingpara los cuadros de selección, muchos navegadores (IE7, OPERA9, CHROME5, SAFARI4) ignorarán totalmente el relleno. Funciona solo en IE8 y en FF 3.6. (todas las pruebas realizadas con HTML5 DOCTYPE en modo estándar). -
los
ha sido creado para mostrar un control deslizante NO una barra de progreso, intentar hacer trampa con CSS para transformar un control deslizante en una barra de progreso suena extraño. Como tratar de usar CSS para cambiar un