DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Der Pseudo-Klassen-Selektor :disabled bietet bedingte Formatierung für HTML-Elemente, die Benutzereingaben empfangen können, wenn die Elemente das Attribut disabled haben. Er ist in der CSS Selectors Level 3 Spezifikation als eine „UI-Elementzustands-Pseudo-Klasse“ definiert, was bedeutet, dass er verwendet wird, um Inhalte basierend auf der Interaktion des Benutzers mit einem Eingabeelement zu formatieren.
Elemente, die das Attribut disabled empfangen können, sind <button>, <input>, <textarea>, <optgroup>, <option> und <fieldset>. Es gibt zwei gültige Syntaxen zum Setzen dieses Attributs: entweder disabled="disabled" oder (in HTML5) einfach das boolesche Schlüsselwort disabled. Ein Element ist deaktiviert, wenn es nicht aktiviert werden kann (z. B. ausgewählt, angeklickt oder Texteingaben zulässt) oder den Fokus erhalten kann.
Ein solches Element kann mit dem Pseudo-Klassen-Selektor :disabled formatiert werden.
Interessante Punkte
:disabledkann mit anderen Pseudo-Selektoren „verkettet“ werden: wie:beforeoder:after, um Icons oder Text zu generieren und mehr Benutzerfeedback zu geben.- Jede Eigenschaft, die mit CSS Transitions oder Animations animiert werden kann, wird ordnungsgemäß animiert, wenn das Attribut
disabledzum HTML-Element hinzugefügt oder daraus entfernt wird.
Verwandte Eigenschaften
Weitere Ressourcen
Browser-Unterstützung
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Alle | 3.1 | Alle | 9 | 9 | Alle | Alle |
Gibt es keine Beschreibung dazu?
Ja
Hallo,
Ich möchte die Textfarbe von deaktivierten Steuerelementen (Dropdown-Liste) ändern. Speziell für IE 10 und 11. Wie kann ich das tun? Die eine Textfarbe sollte in dem untenstehenden Code rot sein.
Beispielcode
Eins
Zwei
Drei
fdghfdg
ssss
Hallo, ich komme, um zu kommentieren. Tja, tschüss
Das funktioniert nicht in meiner Angular-App, die ng-disabled gesetzt hat, nur zur Information.
Scheint für meine Angular-Anwendung gut zu funktionieren, zum Beispiel
select option:disabled { background-color:#ddd; }
Beachten Sie, dass die Pseudo-Klassen
:beforeund:afternicht für ein<input/>funktionieren, da es ein selbstschließendes Tag ist und keine anderen Elemente (auch keine Pseudo-Elemente) enthalten kann.zum Beispiel…
.myclass:disabled { background-color:#7c6a58; }