Ü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
| Desktop | Mobile | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Grundlegende Unterstützung | Chrome Vollständige Unterstützung 1 | Edge Vollständige Unterstützung Ja | Firefox Vollständige Unterstützung 1 | IE Vollständige Unterstützung 9 | Opera Vollständige Unterstützung 9 | Safari Vollständige Unterstützung 3.1 | WebView Android Vollständige Unterstützung 2 | Chrome Android ? | Edge Mobile Vollständige Unterstützung Ja | Firefox Android Vollständige Unterstützung 4 | Opera Android Vollständige Unterstützung 9.5 | Safari iOS Vollständige Unterstützung 3.1 | Samsung Internet Android ? |
Legende
- Vollständige Unterstützung
- Vollständige Unterstützung
- Kompatibilität unbekannt
- Kompatibilität unbekannt