La pseudo-clase :disabled de CSS 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.

/* Selecciona cualquier <input> deshabilitado */
input:disabled {
  background: #ccc;
}

Sintaxis

:disabled

Ejemplo

Este ejemplo muestra un formulario de envío básico. Utiliza el evento JavaScript change para permitir al usuario habilitar / deshabilitar los campos de facturación.

HTML

<form action="#">
  <fieldset id="shipping">
    <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>
  <br>
  <fieldset id="billing">
    <legend>Dirección de facturación</legend>
    <label for="billing_is_shipping">Igual que la dirección de envío:</label>
    <input type="checkbox" id="billing-checkbox" 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>

CSS

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

JavaScript

// Esperar a que la página termine de cargarse
document.addEventListener('DOMContentLoaded', function () {
  // Adjunte el detector de eventos `change` al checkbox
  document.getElementById('billing-checkbox').onchange = toggleBilling;
}, false);

function toggleBilling() {
  // Seleccione los campos de texto de facturación
  var billingItems = document.querySelectorAll('#billing input[type="text"]');

  // Alternar los campos de texto de facturación
  for (var i = 0; i < billingItems.length; i++) {
    billingItems[i].disabled = !billingItems[i].disabled;
  }
}

Resultado

Especificaciones

Especificación Estado Comentario
HTML Living Standard
La definición de ':disabled' en esta especificación.
Living Standard Ningún 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 Ningún 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 navegadores

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Soporte básico1 Si19193.1
FeatureAndroid webviewChrome para AndroidEdge mobileFirefox para AndroidOpera AndroidiOS SafariSamsung Internet
Soporte básico2.1 ? Si49.53.1 ?

1. Internet Explorer does not recognize :disabled on the <fieldset> element.

Ver también

Etiquetas y colaboradores del documento

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