This translation is in progress.

La pseudo-class  CSS :disabled representa qualsevol element deshabilitat. Un element queda deshabilitat si no es pot activar (seleccionar, fer clic, teclejar, etc.) o acceptar l'enfocament. L'element també té un estat habilitat, en el qual es pot activar o acceptar l'enfocament.

/* Selecciona qualsevol <input> deshabilitat */
input:disabled {
  background: #ccc;
}

Sintaxi

:disabled

Exemple

Aquest exemple mostra un formulari d'enviament bàsic. Utilitza l'esdeveniment JavaScript change per permetre que l'usuari habiliti/deshabiliti els camps de facturació.

HTML

<form action="#">
  <fieldset id="shipping">
    <legend>Shipping address</legend>
    <input type="text" placeholder="Name">
    <input type="text" placeholder="Address">
    <input type="text" placeholder="Zip Code">
  </fieldset>
  <br>
  <fieldset id="billing">
    <legend>Billing address</legend>
    <label for="billing_is_shipping">Same as shipping address:</label>
    <input type="checkbox" id="billing-checkbox" checked>
    <br>
    <input type="text" placeholder="Name" disabled>
    <input type="text" placeholder="Address" disabled>
    <input type="text" placeholder="Zip Code" disabled>
  </fieldset>
</form>

CSS

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

JavaScript

// Wait for the page to finish loading
document.addEventListener('DOMContentLoaded', function () {
  // Attach `change` event listener to checkbox
  document.getElementById('billing-checkbox').onchange = toggleBilling;
}, false);

function toggleBilling() {
  // Select the billing text fields
  var billingItems = document.querySelectorAll('#billing input[type="text"]');

  // Toggle the billing text fields
  for (var i = 0; i < billingItems.length; i++) {
    billingItems[i].disabled = !billingItems[i].disabled;
  }
}

Resultat

Especificacions

Especificació Estat Comentari
HTML Living Standard
The definition of ':disabled' in that specification.
Living Standard Sense canvis
HTML5
The definition of ':disabled' in that specification.
Recommendation Defineix la semàntica d'HTML i els formularis.
Selectors Level 4
The definition of ':disabled' in that specification.
Working Draft Sense canvis
CSS Basic User Interface Module Level 3
The definition of ':disabled' in that specification.
Candidate Recommendation Enllaços a Selectors Nivell 3
Selectors Level 3
The definition of ':disabled' in that specification.
Recommendation Defineix la pseudo-class, però no la semàntica associada.

Característica Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic 1.0 (Yes) 1.0 (1.7 or earlier) 9.0 9.0 3.1
Característica Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic 2.1 (Yes) 1.0 (1) 9.0 9.5 3.1

[1] Internet Explorer no reconeix :disabled en l'element <fieldset>.

Vegeu també

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,