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;
}

Hintergrundfarbe des ausgewählten Eingabefeldes wird verändert

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