0
264
Vistascambiando el color del rango de entrada, cambia la parte derecha a negro
Estoy tratando de cambiar el color del rango de entrada, pero hay un comportamiento extraño, cuando cambio el color a rojo (o algún otro como 'púrpura') funciona como debería, pero cuando lo cambio a '# CE7C00' (o muchos otros colores como 'amarillo'), entonces la parte derecha de la entrada se vuelve negra, ¿hay alguna manera de eliminar ese negro?
imagen de comportamiento:
.accent1 { accent-color: red; } .accent2 { accent-color: #CE7C00; } <form action=""> <fieldset> <div> <input class="accent1" id="range" type="range"> </div> <div> <input id="range-accent" class="accent2" type="range"> </div> </fieldset> </form>2 Respuestas
Responde la pregunta0
Para evitar que existan elementos inaccesibles, los navegadores con acento de color deben determinar un color de contraste apto para usar junto con el acento personalizado.
El color de fondo cambia porque el navegador intenta garantizar una cierta cantidad de contraste entre el fondo y el primer plano. Ver CSS acento-color .
0
No estoy seguro de si esta es la mejor manera o no, pero puede usar un degradado lineal o cualquier color que desee en una entrada de rango como esta y cambiar el color dinámicamente usando JavaScript. En realidad, no cambia de color. Establece una cobertura en la entrada de rango
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient
Nota: debe cambiar la propiedad de compensación usando javascript
Espero que esto haya sido útil para ti.