:disabled
es una pseudo-clase que representa cualquier elemento deshabilitado. Funciona como una condicional en la que aplica los estilos, siempre y cuando los elementos cumplan. Es decir, cuando los elementos tienen el atributo disabled
.
/* Todos los button deshabilitados */
button:disabled {
background: gray;
}
El atributo disabled
solo puede aplicar para los elementos: <button>
, <fieldset>
, <input>
, <optgroup>
, <option>
, <select>
y <textarea>
.
Uso
El uso va de verificar desde CSS si un elemento está deshabilitado o no y a partir de ello aplicar los estilos.
<input type="text" placeholder="Habilitado" />
<input type="text" placeholder="Deshabilitado" disabled />
input:disabled {
background: gray;
border: 1px solid blue;
}