es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Botón de radio no respeta CSS.

Tengo un problema extraño y no estoy seguro de dónde buscar una solución. Buscar en Google no está dando respuestas.

Tengo algo de CSS para hacer que el botón de radio seleccionado sea morado. ¿Fácil, verdad? Sin embargo, es azul. Incluso aunque el CSS está claramente en el inspector como morado. Incluso intentar forzar el estilo en el navegador solo para cambiarlo no funciona. ¿Por qué podría ser esto? Nunca he visto dónde claramente está usando el CSS correcto pero no lo está renderizando. Esto está sucediendo en varios navegadores.

Mi código está en Elementor:

selector input[type=”radio”]:checked, input[type=reset], input[type=”checkbox”]:checked, input[type=”checkbox”]:hover:checked, input[type=”checkbox”]:focus:checked, input[type=range]::-webkit-slider-thumb {
border-color: #9710A6 !important;
background-color: #9710A6 !important;
box-shadow: none;
}

Que se muestra perfectamente en el inspector:

.elementor-1202 .elementor-element.elementor-element-f11e2ef input[type=”radio”]:checked, input[type=reset], input[type=”checkbox”]:checked, input[type=”checkbox”]:hover:checked, input[type=”checkbox”]:focus:checked, input[type=range]::-webkit-slider-thumb {
border-color: #9710A6 !important;
background-color: #9710A6 !important;
box-shadow: none;
}

Y aparece como lo que se está calculando en la consola.

background-color
rgb(151, 16, 166)
#9710A6 !important.elementor-1202 .elementor-element.elementor-element-f11e2ef input[type=”radio”]:checked, input[type=reset], input[type=”checkbox”]:checked, input[type=”checkbox”]:hover:checked, input[type=”checkbox”]:focus:checked, input[type=range]::-webkit-slider-thumb

Y sin embargo, cuando lo miro, es azul. Usando una herramienta de selección de color devuelve:
0075FF – Creo que es el azul predeterminado del navegador.

¿Hay alguna manera de que tal vez se esté ejecutando algún JS o algo que lo esté cambiando y que no aparezca en la consola? Si fuera JS cambiándolo, ¿no cambiaría el valor “calculado” resultante?

Tan extraño, cualquier idea o ayuda que puedan ofrecer sería realmente apreciada. ¡Muchas gracias!

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Parece que tienes un problema extraño con tu CSS que no se está renderizando correctamente. Parece que el CSS se está aplicando correctamente, ya que se muestra en el inspector y en la consola, pero no se está renderizando adecuadamente. Es posible que haya algún JavaScript que esté anulando el CSS, o que haya algún otro problema que esté causando que el CSS no se renderice correctamente.

    Podría ser útil tratar de aislar el problema desactivando cualquier JavaScript que pueda estar en ejecución, o probando el código en otro navegador. También podrías intentar usar un color diferente para ver si el problema es específico del color que estás usando.

    Si sigues teniendo problemas, podría ser útil publicar un enlace a tu código para que otros puedan echar un vistazo y ofrecer algunos consejos.

Comments are closed.