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 para AndroidEdge MobileFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
:enabledChrome Soporte completo 1Edge Soporte completo 12Firefox Soporte completo 1IE Soporte completo 9Opera Soporte completo 9Safari Soporte completo 3.1WebView Android Soporte completo 2Chrome Android Soporte completo 18Edge Mobile Soporte completo 12Firefox Android Soporte completo 4Opera Android Soporte completo 10.1Safari iOS Soporte completo 3.1Samsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Compatibilidad desconocida  
Compatibilidad desconocida

Ver también

Etiquetas y colaboradores del documento

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