:disabled

Übersicht

Die :disabled CSS Pseudoklasse steht für alle deaktivierten Elemente. Ein Element gilt als deaktiviert, wenn es nicht aktiviert (d.h. ausgewählt, angeklickt oder mit Text gefüllt) oder fokussiert werden kann. Das Element verfügt außerdem über einen Status, in dem es aktiviert oder fokussiert werden kann.

Beispiele

Beispielselektoren

input:disabled: Wählt alle deaktivierten Eingabefelder aus.
select.country:disabled: Wählt ein deaktiviertes Zielelement mit der Klasse country aus.

Anwendungsbeispiel

Das folgende CSS:

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

Angewendet auf das folgende HTML5 Beispiel:

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

<form action="#">
  <fieldset>
    <legend>Empfängeradresse</legend>
    <input type="text" placeholder="Name">
    <input type="text" placeholder="Adresse">
    <input type="text" placeholder="PLZ">
  </fieldset>
  <fieldset>
    <legend>Rechnungsadresse</legend>
    <label for="billing_is_shipping">Rechnungsadresse entspricht der Empfängeradresse:</label>
    <input type="checkbox" onchange="javascript:toggleBilling()" checked>
    <br />
    <input type="text" placeholder="Name" disabled>
    <input type="text" placeholder="Address" disabled>
    <input type="text" placeholder="Zip Code" disabled>
  </fieldset>
</form>

Mit ein wenig JavaScript:

function toggleBilling() {
  var billingItems = document.querySelectorAll('#billing input[type="text"]');
  for (var i = 0; i < billingItems.length; i++) {
    billingItems[i].disabled = !billingItems[i].disabled;
  }
}

Führt zu einem ergrautem Hintergrund aller Texteingabefelder im <fieldset> der Rechnungsadresse.

Spezifikationen

Spezifikation	Status	Kommentar
HTML Living Standard Die Definition von ':disabled' in dieser Spezifikation.	Lebender Standard	Keine Änderung
HTML5 Die Definition von ':disabled' in dieser Spezifikation.	Empfehlung	Beschreibt die Semantik von HTML und Formularen.
Selectors Level 4 Die Definition von ':disabled' in dieser Spezifikation.	Arbeitsentwurf	Keine Änderung
CSS Basic User Interface Module Level 3 Die Definition von ':disabled' in dieser Spezifikation.	Empfehlung	Verweis auf Selektors Level 3
Selectors Level 3 Die Definition von ':disabled' in dieser Spezifikation.	Empfehlung	Beschreibt die Pseudoklasse,aber nicht die dazugehörige Semantik.

Browserkompatibilität

BCD tables only load in the browser

Siehe auch

:enabled