Übersicht

Die :enabled CSS Pseudoklasse repräsentiert alle aktivierten Elemente. Ein Element ist aktiviert, falls es aktiviert werden kann (z. B. markierte, angeklickte Elemente oder solche, die Texteingaben akzeptieren) oder die fokussiert werden können. Das Element hat auch einen deaktivierten Zustand, in welchem es nicht aktiviert werden oder fokussiert werden kann.

Beispiel

Der folgende Code macht die Textfarbe grün, wenn das Element aktiviert ist, und grau, wenn es deaktiviert ist. Dies erlaubt es, dem Benutzer Feedback darüber zu geben, ob mit den Elementen interagiert werden kann oder nicht.

Das folgende HTML...

<form action="url_of_form">
  <label for="FirstField">First field (enabled):</label> <input type="text" id="FirstField" value="Lorem"><br />
  <label for="SecondField">Second field (disabled):</label> <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br />
  <input type="button" value="Submit" />
</form>  

...in Verwendung mit diesem CSS...

input:enabled {
  color: #22AA22;
}

input:disabled {
  color: #D9D9D9;
}

...ergibt:

Beachte, dass die Farbe des Buttontexts auch grün ist, da der Button ebenfalls aktiviert ist.

Spezifikationen

Spezifikation Status Kommentar
HTML Living Standard
Die Definition von ':enabled' in dieser Spezifikation.
Lebender Standard Keine Änderung
HTML5
Die Definition von ':enabled' in dieser Spezifikation.
Empfehlung Definiert die Semantik in Bezug auf HTML und Formulare.
Selectors Level 4
Die Definition von ':enabled' in dieser Spezifikation.
Arbeitsentwurf Keine Änderung
CSS Basic User Interface Module Level 3
Die Definition von ':enabled' in dieser Spezifikation.
Empfehlung Verknüpfung zu Selectors Level 3.
Selectors Level 3
Die Definition von ':enabled' in dieser Spezifikation.
Empfehlung Definiert die Pseudoklasse, aber nicht die zugehörige Semantik.

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung JaFirefox Vollständige Unterstützung 1IE Vollständige Unterstützung 9Opera Vollständige Unterstützung 9Safari Vollständige Unterstützung 3.1WebView Android Vollständige Unterstützung 2Chrome Android ? Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 9.5Safari 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 auch

Schlagwörter des Dokuments und Mitwirkende

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