La pseudo-clase :enabled CSS representa cualquier elemento habilitado. Un elemento está habilitado si puede ser activado (es decir seleccionado, se puede hacer click en él, acepta que se le introduzca texto, etc.) o si accepta el foco. El elemento también tiene un estado deshabilitado el en cuál, no puede ser activado ni acepta el foco.

/* Selecciona cualquier <input> habilitado */
input:enabled {
  color: blue;
}

Sintaxis

:enabled

Ejemplo

El siguiente ejemplo hace que el color del texto y el botón <input> sean verdes cuando están habilitados, y grises cuando están deshabilitados. Esto ayuda al usuario a comprender con qué elementos se puede interactuar.

HTML

<form action="url_of_form">
  <label for="FirstField">Primer campo (habilitado):</label>
  <input type="text" id="FirstField" value="Lorem"><br>

  <label for="SecondField">Segundo campo (deshabilitado):</label>
  <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br>

  <input type="button" value="Enviar">
</form>

CSS

input:enabled {
  color: #2b2;
}

input:disabled {
  color: #aaa;
}

Resultado

Especificaciones

Especificación Estado Comentario
HTML Living Standard
La definición de ':enabled' en esta especificación.
Living Standard Ningún cambio.
HTML5
La definición de ':enabled' en esta especificación.
Recommendation Define la semántica en relación con HTML y los formularios.
Selectors Level 4
La definición de ':enabled' en esta especificación.
Working Draft Ningún cambio.
CSS Basic User Interface Module Level 3
La definición de ':enabled' en esta especificación.
Recommendation Enlaza con selectores nivel 3.
Selectors Level 3
La definición de ':enabled' en esta especificación.
Recommendation Define la pseudo clase pero no la semántica asociada.

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Soporte básicoChrome Soporte completo 1Edge Soporte completo SiFirefox Soporte completo 1IE Soporte completo 9Opera Soporte completo 9Safari Soporte completo 3.1WebView Android Soporte completo 2Chrome Android ? Edge Mobile Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo 9.5Safari iOS Soporte completo 3.1Samsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Compatibility unknown  
Compatibility unknown

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: lajaso, pekechis
Última actualización por: lajaso,