CSS :disabled Pseudo Clase
Usa la pseudo-clase CSS :disabled para seleccionar y estilizar elementos deshabilitados. Lee sobre la pseudo-clase y practica con ejemplos.
La pseudo-clase :disabled selecciona y estiliza todos los elementos que están actualmente deshabilitados — es decir, elementos con los que el usuario no puede interactuar. Un control se deshabilita cuando lleva el atributo HTML disabled, por lo que :disabled te permite dar a esos controles un aspecto diferenciado de "no puedes usar esto" sin añadir una clase extra.
![Ejemplo de la pseudo-clase CSS :disabled](https://api.w3docs.com/uploads/media/default/0001/03/ced1796b1077a7b96196914b14dfc04aa89805ab.png "CSS :disabled pseudo-class example" =420x)
Esta página cubre qué cuenta como elemento deshabilitado, la sintaxis del selector, cómo se relaciona :disabled con su opuesto :enabled, la diferencia entre disabled y readonly, y un conjunto de ejemplos de estilizado ejecutables.
Qué elementos pueden deshabilitarse
Solo los elementos que pueden ser deshabilitados en primer lugar son seleccionados por :disabled. Estos son los controles de formulario interactivos:
<button><input>(todos los tipos)<select>y sus<option>/<optgroup><textarea><fieldset>— deshabilitar un<fieldset>deshabilita todos los controles que contiene
Un control deshabilitado se comporta de manera diferente a uno normal:
- No acepta clics, entrada de texto ni foco de teclado.
- Su valor no se envía con el formulario.
- No es validado por el navegador, por lo que
:valid/:invalidno se aplican a él.
Los elementos de texto plano como <p> o <div> no pueden deshabilitarse, por lo que nunca coinciden con :disabled.
:disabled vs. :enabled
:disabled y :enabled son imágenes especulares. Cualquier control que puede deshabilitarse coincide exactamente con uno de ellos en cada momento: :enabled cuando es interactivo, :disabled cuando el atributo disabled está presente. Estilizar ambos proporciona al usuario un claro contraste visual entre controles utilizables e inutilizables.
disabled vs. readonly
Estos dos atributos parecen similares pero no son lo mismo:
disabled | readonly | |
|---|---|---|
| El usuario puede enfocarlo | No | Sí |
| El usuario puede editar el valor | No | No |
| Valor enviado con el formulario | No | Sí |
| Seleccionado por | :disabled | :read-only |
Usa disabled para desactivar un control completamente; usa readonly (ver :read-only) cuando el valor debe permanecer visible y enviarse pero no editarse.
Sintaxis
Usado por sí solo, :disabled apunta a cualquier control deshabilitado. Combínalo con un selector de tipo o de atributo para ser más específico:
/* every disabled control */
:disabled {
/* css declarations */
}
/* only disabled text inputs */
input[type="text"]:disabled {
background: #ccc;
cursor: not-allowed;
}Ejemplo de cómo establecer un color de fondo para un elemento <input> deshabilitado:
CSS :disabled code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
padding: 2px 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
}
input[type=text]:enabled {
background: #eee;
}
input[type=text]:disabled {
background: #ccc;
}
</style>
</head>
<body>
<h2>:disabled selector example for input</h2>
<form action="">
<label for="name">First name:</label>
<input type="text" value="John" id="name" />
<br />
<label for="lastname">Last name:</label>
<input type="text" value="Smith" id="lastname" />
<br />
<label for="country">Country:</label>
<input type="text" disabled="disabled" value="10 High Street" id="country" />
</form>
</body>
</html>Ejemplo de cómo establecer un color de fondo para elementos <option> deshabilitados:
CSS :disabled another code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
option:disabled {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>:disabled selector example for option</h2>
<select>
<option value="paris">Paris</option>
<option value="london" disabled>London</option>
<option value="moscow">Moscow</option>
<option value="rome" disabled>Rome</option>
<option value="berlin">Berlin</option>
</select>
</body>
</html>Nota: La pseudo-clase
:disabledtiene prioridad sobre:valide:invalid. Los elementos de formulario deshabilitados no son validados por el navegador.
Ejemplo de un elemento <input> deshabilitado:
Example of disabled input element
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
width: 60%;
margin: 0;
border: none;
outline: 1px solid lightgrey;
outline-offset: 2px;
}
input:disabled {
background: #cccccc;
cursor: not-allowed;
}
form {
background: #67a6ec;
padding: 1.5em;
max-width: 400px;
width: 100%;
outline: 10px solid rgba(17, 58, 103, 0.6);
}
hr {
visibility: hidden;
}
label {
margin-right: 3%;
text-align: left;
display: inline-block;
width: 35%;
}
</style>
</head>
<body>
<h2>:disabled selector example with styling</h2>
<form action="#">
<label for="name">Enabled Input:</label>
<input type="text" autofocus />
<hr />
<label for="name">Disabled Input:</label>
<input type="text" disabled />
</form>
</body>
</html>Nota de accesibilidad
Dado que un control deshabilitado no puede recibir foco, los usuarios de teclado y lectores de pantalla lo omiten por completo y no reciben ninguna explicación de por qué no está disponible. No te limites a oscurecer el control — cuando el motivo importa, añade texto de ayuda cercano, o mantén el control habilitado y valida al enviar el formulario. Además, mantén suficiente contraste en el texto deshabilitado para que siga siendo legible.
Pseudo-clases relacionadas
:enabled— el estado opuesto: controles con los que el usuario puede interactuar.:read-onlyy:read-write— para entradasreadonly.:required— controles que deben ser completados.:valide:invalid— estados de validación de formulario.:checked— casillas de verificación, botones de radio y opciones seleccionadas.:focus— el elemento que actualmente tiene el foco de teclado.