CSS :enabled Pseudo Clase
Usa la pseudo-clase CSS :enabled para seleccionar y dar estilo a los elementos habilitados. Lee sobre la pseudo-clase y practica con ejemplos.
La pseudo-clase CSS :enabled coincide con cualquier elemento de formulario que esté actualmente habilitado — es decir, que puede ser activado (hacer clic, escribir o enfocar) y puede recibir la entrada del usuario. Es el complemento directo de :disabled.
Un elemento está "habilitado" cuando es del tipo que admite un estado disabled y no tiene el atributo disabled establecido. Esta página cubre cuándo se aplica :enabled, los elementos a los que afecta, los errores comunes y dos ejemplos prácticos.
Qué elementos pueden estar habilitados
:enabled solo apunta a elementos que realmente pueden ser deshabilitados. Estos son los controles de formulario interactivos:
<button><input>(todos los tipos)<select><textarea><option><optgroup><fieldset>
Un <div>, <p> o un enlace nunca pueden estar "habilitados" o "deshabilitados" en este sentido, por lo que :enabled nunca coincidirá con ellos — aunque sean interactivos.
Por qué usarlo
De forma predeterminada, un control habilitado ya tiene apariencia activa, por lo que rara vez necesitas :enabled por sí solo. Resulta útil cuando quieres un contraste visual claro entre controles utilizables y no utilizables — por ejemplo, resaltar los campos que el usuario puede rellenar mientras que :disabled oscurece los que no puede. Combinar ambas pseudo-clases hace que la interactividad de un formulario sea evidente de un vistazo.
Aspectos a tener en cuenta
- Estado predeterminado. Como los controles están habilitados de forma predeterminada,
:enabledcoincide con ellos a menos que añadas explícitamente el atributodisabled. Establecerdisableden HTML o mediante JavaScript (element.disabled = true) cambia un elemento de:enableda:disabled. <fieldset disabled>en cascada. Deshabilitar un<fieldset>deshabilita todos los controles que contiene, por lo que esos elementos secundarios dejan de coincidir con:enabledincluso sin su propio atributodisabled.- Solo lectura no es deshabilitado. Un
<input readonly>sigue estando habilitado — coincide con:enabled, no con:disabled. Usa:read-onlypara dar estilo a elementos de solo lectura.
Versión
Sintaxis
Ejemplo de sintaxis CSS :enabled
:enabled {
css declarations;
}Ejemplo del selector :enabled:
Ejemplo de código CSS :enabled
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
border: 1px solid #ccc;
margin-bottom: 10px;
padding: 2px 5px;
}
input[type=text]:enabled {
background: #eee;
}
input[type=text]:disabled {
background: #ccc;
}
</style>
</head>
<body>
<h2>:enabled selector example</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 del selector :enabled con la etiqueta <option>:
Otro ejemplo de código CSS :enabled
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
option:enabled {
background: #d4f7d4;
color: #064;
}
option:disabled {
background: #f0f0f0;
color: #aaa;
}
</style>
</head>
<body>
<h2>:enabled selector example</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>Ten en cuenta que los navegadores limitan cuánto se puede volver a estilizar un <select> y sus elementos <option>, por lo que el renderizado exacto de estos colores varía entre navegadores y sistemas operativos.
Compatibilidad con navegadores
La pseudo-clase :enabled es compatible con todos los navegadores modernos, incluyendo Chrome, Firefox, Safari y Edge.
Pseudo-clases relacionadas
:disabled— el opuesto de:enabled; coincide con controles que no se pueden usar.:read-only— coincide con controles que el usuario no puede editar (nota: siguen siendo:enabled).:checked— coincide con casillas de verificación, botones de radio y opciones seleccionadas.:required— coincide con controles de formulario que deben rellenarse.:focus— coincide con el control que actualmente tiene el foco del teclado.