Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

:disabled

Übersicht

Die :disabled CSS Pseudoklassesteht 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
WHATWG 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.
Anwärter 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

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari
Unterstützung 1.0 1.0 (1.7 oder früher) 9.0 9.0 3.1
Merkmal Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Unterstützung 2.1 1.0 (1) 9.0 9.5 3.1

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Sebastianz, gruntswilldie
 Zuletzt aktualisiert von: Sebastianz,