: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

// 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 Standard # selector-disabled
Selectors Level 4 # enableddisabled

Compatibilidad con navegadores

BCD tables only load in the browser

Ver también

:enabled