:disabled

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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.

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

Sintaxis

Error: could not find syntax for this item

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

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

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

JavaScript

js
// 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

Specification
HTML
# selector-disabled
Selectors Level 4
# disabled-pseudo

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:disabled

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

Ver también