: deaktiviert - CSS-Tricks | CSS-Almanach 2025

Der :disabledPseudoklassen-Selektor bietet HTML-Elementen, die Benutzereingaben erhalten können, ein bedingtes Styling, wenn die Elemente das disabledAttribut haben. Es wird in der CSS Selectors Level 3-Spezifikation als „UI-Elementstatus-Pseudoklasse“ definiert. Dies bedeutet, dass Inhalte basierend auf der Interaktion des Benutzers mit einem Eingabeelement formatiert werden.

Elemente, die die empfangen können disabledAttribut enthalten , , , , und . Es gibt zwei gültige Syntaxen zum Festlegen dieses Attributs: entweder disabled="disabled"oder (in HTML5) einfach das disabledBoolesche Schlüsselwort. Ein Element ist deaktiviert, wenn es nicht aktiviert werden kann (z. B. ausgewählt, angeklickt oder Texteingabe akzeptiert) oder der Fokus akzeptiert werden kann.

Ein solches Element kann mit dem :disabledPseudo-Klassen-Selektor gestaltet werden:

Schauen Sie sich diesen Stift an!

Sehenswürdigkeiten

:disabledkann mit anderen Pseudo-Selektoren „verkettet“ werden: wie :beforeoder :afterum Symbole oder Text zu generieren, um mehr Benutzer-Feedback zu geben.
Alle Eigenschaften, die mit CSS-Übergängen oder -Animationen animiert werden können, werden ordnungsgemäß animiert, wenn das disabledAttribut zum HTML-Element hinzugefügt oder daraus entfernt wird.