Eingabefelder hervorheben
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Problem
Das vom Benutzer gerade verwendete Formular-Eingabefeld soll visuell hervorgehoben werden.
Lösung
Verwenden Sie die Pseudoklasse :focus. Mit der folgenden CSS-Regel können Sie die Hintergrundfarbe des gerade benutzten input-Elements verändern (siehe folgende Abbildung):
input:focus {
background-color: yellow;
}
Abbildung: Die Hintergrundfarbe des gerade ausgewählten Eingabefeldes wird verändert.
Diskussion
Folgende Browser unterstützen die Pseudoklasse :focus: Netscape Navigator 6+, Firefox, Safari und Opera 7. Browser ohne Unterstützung für :focus ignorieren entsprechende Regeln einfach, sodass die Rückwärtskompatibilität gewährleistet ist.
Siehe auch
Das Rezept Stildefinitionen für textarea-Elemente zur Definition von Stilen für textarea-Elemente und die Tabelle Übersicht über die CSS-Eigenschaften für mehrzeilige Eingabebereiche unter Stildefinitionen für Formularelemente.
<< zurück | vor >> |
Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln