1

Estoy intentando cambiar los estilos a un checkbox que tiene en el html la propiedad "disabled", pero no se aplican los estilos.

.form-control:disabled, .form-control[readonly]{
    background-color: #f9f9f9;
}

input[type="checkbox"]:disabled {
    background-color: yellow !important;
}

En mi html me aparece como que coge ese background, pero no lo tiene

introducir la descripción de la imagen aquí

Tiene el mismo color gris muy opaco..... ( he limpiado la cache, f5, ctr+ f5, ctr shift f5 y nada.. sigue del mismo color)

Lo curioso es que ese input "que es un checkbox"

introducir la descripción de la imagen aquí

Sigue apareciendo de ese color a pesar de que en propiedades tiene bg color yellow..

introducir la descripción de la imagen aquí

Gracias !

1
  • Investigando un poco, he encontrado este enlace a StackOverflow general donde mencionan cómo realizar tu problema con CSS Commented el 22 abr. 2021 a las 8:05

1 respuesta 1

2

Para poder dar el formato que tu quieras a una casilla de verificación necesitas crear una nueva casilla y esconder (display:none) la que viene de fabrica.

En el siguiente ejemplo la creao utilizando el pseudoelemento after

[type="checkbox"]{display:none;position:relative}

[type="checkbox"] + label:after{
   content:"";
   display:inline-block;
   width:1em;height:1em;
   outline:1px solid silver;  
}


[type="checkbox"]:disabled + label:after{
   background:yellow;
}
<form class="form">    
     <input type="checkbox" id="disabled" disabled="disabled" >
     <label for="disabled">checkbox:</label>
</form>

Por favor lea más acerca de casillas de verificación con estilo

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.