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.
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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Soporte básicoChrome Soporte completo 1Edge Soporte completo SiFirefox Soporte completo 1IE Soporte completo 9
Notas
Soporte completo 9
Notas
Notas Internet Explorer does not recognize :disabled on the <fieldset> element.
Opera 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 notas de implementación.
Ver notas de implementación.

Ver también

Etiquetas y colaboradores del documento

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