• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

216
Views
cambiando 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:

ingrese la descripción de la imagen aquí

 .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>

almost 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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 .

almost 3 years ago · Juan Pablo Isaza Report

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.

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error