CSS : Fokusselektor
Beispiel
Wählen Sie ein Eingabefeld aus und gestalten Sie es, wenn es den Fokus erhält:
input:focus
{
background-color: yellow;
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Der :focus
Selektor wird verwendet, um das Element auszuwählen, das den Fokus hat.
Tipp: Der :focus-Selektor ist für Elemente zulässig, die Tastaturereignisse oder andere Benutzereingaben akzeptieren.
Ausführung: | CSS2 |
---|
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die den Selektor vollständig unterstützt.
Selector | |||||
---|---|---|---|---|---|
:focus | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
CSS-Syntax
:focus {
css declarations;
}
Mehr Beispiele
Beispiel
Wenn ein <input type="text"> den Fokus erhält, ändern Sie die Breite schrittweise von 100 Pixel auf 250 Pixel:
input[type=text] {
width: 100px;
transition: ease-in-out, width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}
Verwandte Seiten
CSS-Tutorial: CSS-Pseudoklassen