: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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
:disabledChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12
Hinweise
Vollständige Unterstützung 12
Hinweise
Hinweise Edge does not recognize :disabled on the <fieldset> element.
Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 9
Hinweise
Vollständige Unterstützung 9
Hinweise
Hinweise Internet Explorer does not recognize :disabled on the <fieldset> element.
Opera Vollständige Unterstützung 9Safari Vollständige Unterstützung 3.1WebView Android Vollständige Unterstützung 2Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 10.1Safari iOS Vollständige Unterstützung 3.1Samsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.

Siehe auch