:disabled

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 (en-US) 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

BCD tables only load in the browser

Ver tambi茅n