Fokussierte Elemente mit CSS
Stand vom 15.09.2002
Ist der Focus in einem Element, dann sollte dies anders dargestellt sein, sodass der Besucher erkennt, das dieses Element im Focus ist. Mit CSS2 ist das möglich.
Es is nur Benutzerfreundlich ein Element, das gerade im Focus ist,
hervorzuheben. Damit kann der Besucher erkennen "wo er gerade
ist". Mit der CSS Pseudoklasse :focus ist das möglich.
Diese Pseudoklasse kann auf alle Elemente angewendet werden, die
im Focus stehen können, z.B. Eingabefelder, Checkboxen usw.
Bisher interpretiert nur Netscape 6.2 diese CSS2 Befehle korrekt.
Die anderen Browser werden jedoch bald nachziehen.
<style type="text/css">
INPUT {color:red}
INPUT:focus {color:blue}
</style>
Die erste Zeile des CSS Codes legt das aussehen des Feldes bei normalen
Zustand fest.
INPUT {color:red}
Die zweite Zeile des Codes verwendet die CSS Pseudoklasse :focus.
Mit ihr wird der fokussierte Zustand des Elementes beschrieben.
In diesem Fall soll die Farbe des Inhaltes des <INPUT> Feldes
Blau werden, wenn der Focus auf ihm sitzt.
Auf diese Weise können Sie vor allem die Formulare um einiges
freundlicher gestalten, ohne dabei auf JavaScript zurückgreifen
zu müssen.
technisch
HTML