Resumen

La  CSS pseudo-class :disabled representa a cualquier elemento deshabilitado. Un elemento se encuentra deshabilitado si no puede ser activado ( por ejemplo ser selecionado, hacer click en él o aceptar texto de entrada) ni aceptar el foco. El elemento tiene además un estado habilitado en el cual puede ser activado o recibir foco.

Ejemplos

Ejemplos de selectores

input:disabled
Selecciona todos los elementos input deshabilitados.
select.country:disabled
Selecciona un elemento select, con la clase country y que además esté deshabilitado.

Ejemplo de Uso

El siguiente CSS

input[type="text"]:disabled { background: #ccc; }

Aplicado a un fragmento HTML5:

<form action="#">
  <fieldset>
    <legend>Dirección de envío</legend>
    <input type="text" placeholder="Nombre">
    <input type="text" placeholder="Dirección">
    <input type="text" placeholder="Código postal">
  </fieldset>
  <fieldset id="billing">
    <legend>Dirección de facturación</legend>
    <label for="billing_is_shipping">Lo mismo que la dirección de envío:</label>
    <input type="checkbox" onchange="javascript:toggleBilling()" checked>
    <br />
    <input type="text" placeholder="Nombre" disabled>
    <input type="text" placeholder="Dirección" disabled>
    <input type="text" placeholder="Código Postal" disabled>
  </fieldset>
</form>

Con un poco de javascript:

function toggleBilling() {
  var billingItems = document.querySelectorAll('#billing input[type="text"]');
  for (var i = 0; i < billingItems.length; i++) {
    billingItems[i].disabled = !billingItems[i].disabled;
  }
}

El resultado mostrara todo los elementos del fieldset de facturación deshabilitados y con un fondo ligeramente gris.

Especificaciones

Especificación Estado Comentario
HTML Living Standard
La definición de ':disabled' en esta especificación.
Living Standard Sin cambio
HTML5
La definición de ':disabled' en esta especificación.
Recommendation Define la semántica referente a HTML y los formularios.
Selectors Level 4
La definición de ':disabled' en esta especificación.
Working Draft Sin cambio.
CSS Basic User Interface Module Level 3
La definición de ':disabled' en esta especificación.
Proposed Recommendation Referencia a los selectores de Nivel 3.
Selectors Level 3
La definición de ':disabled' 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,