Übersicht
Die CSS Pseudoklasse :focus steht für Elemente, welche mit einem Eingabegerät, wie z. B. der Tastatur, fokusiert wurden.
Syntax
element:focus { ... }
Beispiele
.first-name:focus {
color: red;
}
.last-name:focus {
color: lime;
}
<input class="first-name" value="Dieser Text wird rot, wenn das Textfeld den Fokus erhält"> <input class="last-name" value="Dieser Text wird grün, wenn das Textfeld den Fokus erhält">
Spezifikationen
| Spezifikation | Status | Kommentar |
|---|---|---|
| Selectors Level 4 Die Definition von ':focus' in dieser Spezifikation. |
Arbeitsentwurf | Keine Änderung |
| Selectors Level 3 Die Definition von ':focus' in dieser Spezifikation. |
Empfehlung | Keine Änderung |
| CSS Level 2 (Revision 1) Die Definition von ':focus' in dieser Spezifikation. |
Empfehlung | Ursprüngliche Definition |
Browser Kompatibilität
Update compatibility data on GitHub
| Desktop | Mobile | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
:focus | Chrome Vollständige Unterstützung 1 | Edge Vollständige Unterstützung Ja | Firefox Vollständige Unterstützung 1 | IE Vollständige Unterstützung 8 | Opera Vollständige Unterstützung 7 | Safari Vollständige Unterstützung 1 | WebView Android Vollständige Unterstützung 1 | Chrome Android Vollständige Unterstützung 18 | Edge Mobile Vollständige Unterstützung Ja | Firefox Android Vollständige Unterstützung 4 | Opera Android Vollständige Unterstützung 10.1 | Safari iOS Vollständige Unterstützung 1 | Samsung Internet Android ? |
Legende
- Vollständige Unterstützung
- Vollständige Unterstützung
- Kompatibilität unbekannt
- Kompatibilität unbekannt
Siehe auch