Resumen

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

Ejemplo

El siguiente ejemplo hará que el color del texto al ser seleccionado sea verde medio sombreado y gris al ser deshabilitado. Esto permite dar retroalimentación al usuario sobre si puede interactuar con un elemento o no.

El 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="Submit" />
    </form>
  

...usado con este CSS...

input:enabled {
  color: #22AA22;
}
input:disabled {
  color: #D9D9D9;
}
  

...dará el siguiente resultado:

 
Date cuenta que el color del texto del botón es también verde ya que el botón también está habilitado.
 

Especificaciones

Especificación Estado Comentario
HTML Living Standard
La definición de ':enabled' en esta especificación.
Living Standard Sin 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 Sin cambio
CSS Basic User Interface Module Level 3
La definición de ':enabled' en esta especificación.
Proposed 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 los distintos navegadores.

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico 1.0 1.0 (1.7 o anterior) 9.0 9.0 3.1
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte básico 2.1 1.0 (1) 9.0 9.5 3.1

Ver además

Etiquetas y colaboradores del documento

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