¿por qué es imposible cambiar el color de la casilla de verificación independientemente de las modificaciones del código?

a pesar de los esfuerzos para personalizar el color de fondo de las casillas de verificación a través de CSS, muchos usuarios encuentran una falta de cambios visibles. Este problema ha sido frecuente en Firefox 29 y más tarde.

Explation

La incapacidad de alterar el color de la casilla de verificación proviene de una omisión deliberada de esta funcionalidad en HTML. Las casillas de verificación y los botones de radio se consideran elementos de forma "nativas", lo que significa que su apariencia se rige por el navegador en lugar de las reglas de CSS. Los navegadores priorizan la consistencia en la interfaz de usuario y, por lo tanto, hacen cumplir las propiedades visuales predeterminadas para estos elementos.

solución

para superar esta limitación y personalizar la apariencia de la casilla de verificación, considere utilizar la siguiente propiedad CSS:

[&]. Esta propiedad, obtiene control sobre el color de acento aplicado a la casilla de verificación, que abarca la marca de verificación y cualquier fondo que lo acompañe. Aquí hay un ejemplo:

accent-color

#CB1 { acento color: #9b59b6; / * Cambiar el color de la marca de verificación dentro de la casilla de verificación #CB1 a azul */ }

#cb1 {
  accent-color: #9b59b6; /* Change the color of the check mark within checkbox #cb1 to blue */
}

Consulte a continuación para presenciar la modificación exitosa de los colores de la casilla de verificación usando la propiedad de acento:

>

#cb1 {
  acento color: #9b59b6;
}

#CB2 {
  acento color: #34495E;
}

#CB3 {
  acento color: #e74c3c;
}