Webseiten-Infos.de

Aktive Eingabefelder visuell hervorheben

Auf der Website Webseiten-Infos.de werden ab heute für einige moderne Browser die aktiven Eingabefelder visuell mit einem breiten Rahmen in Orange hervorgehoben.

Hier zur Veranschaulichung ein Bildschirmfoto (Screenshot) von der Darstellung im Firefox 3.6.3:

Auf die Idee für diesen Glüheffekt (glow effect) brachte mich der Artikel “Mit CSS3 aktive Formularfelder auf Websites deutlicher kennzeichnen” von Michael van Laar.

Ergänzend bzw. abweichend zu seiner Liste mit fünf Dingen, die bei der Umsetzung zu beachten sind, gelten für meine Lösung folgende fünf Punkte:

1. Ich habe auf die – vorsichtig formuliert – bescheidene Darstellung im Browser Opera verzichtet, indem ich die CSS3-Eigenschaft box-shadow nur mit Präfix -webkit (insbesondere für Safari und Google Chrome) sowie -moz (insbesondere für Firefox und Flock) in meiner CSS-Datei einsetze, also box-shadow ohne Präfix hierfür erst einmal nicht verwende.
2. Die Eigenschaft border habe ich nicht generell auf input, sondern lediglich auf input[type=text] angewandt, damit es bei Checkboxen im Opera nicht zu Darstellungsproblemen kommt (siehe hierzu auch meinen Blogbeitrag “Opera: Checkboxen korrekt darstellen“).
3. Der blaue Glüheffekt (glow effect) des Safari bei den Eingabefeldern (Formularfeldern) passt nicht zu dem Grün auf der Website Webseiten-Infos.de. Ich habe deshalb die Farbe auf das Orange vom Icon für meinen E-Mail-Newsletter geändert.
4. Dadurch, dass ich die Eigenschaft border lediglich auf input[type=text] anwende (siehe 2.), habe ich auch kein Darstellungs- bzw. Gestaltungsproblem mit den Submit-Button (und brauche zumindest insoweit keine extra Klasse für die Submit-Button).
5. Damit der Glüheffekt (glow effect) nicht abgeschnitten wird, musste ich beim Suchfeld, beim Eingabefeld für den E-Mail-Newsletter sowie beim Kontaktformular ergänzende CSS-Anweisungen für den Abstand mit margin vornehmen. Darüber hinaus habe ich dann die Größe des Suchfelds sowie des Eingabefelds  für den E-Mail-Newsletter verringert, so dass auch weiterhin bei der minimalen Seitenbreite von etwa 800px der Submit-Button in der gleichen Zeile bleibt. Schließlich musste ich meine CSS-Patchdatei für den Internet Explorer (IE) insoweit ebenfalls anpassen.

Aktuell sollte der Glüheffekt (glow effect) beim aktivierten Suchfeld, Eingabefeld für den E-Mail-Newsletter, den Eingabefeldern für Kommentare sowie für das Kontaktformular zu sehen sein.

Voraussetzung dafür ist, dass Du den Mauszeiger (Cursor) in ein Eingabefeld einer Seite von Webseiten-Infos.de mit einem der folgenden Browser setzt (siehe Ausführungen bei sitepoint.com zum CSS-Selektor :nth-of-type(N)):

• Firefox Version 3.5 oder höher
• Safari Version 3.1 oder höher
• Google Chrome 2.0 oder höher

Nicht unterstützt wird der Glüheffekt (glow effect) von allen Versionen des Internet Explorers (IE).

Der Browser Opera kennt zwar seit Version 9.5 den CSS-Selektor :nth-of-type(N), aber liefert noch keine akzeptable Darstellung.

Bleibt nur zu hoffen, dass hoffentlich künftige Versionen des Internet Explorers (IE) und Opera diesen Glüheffekt (glow effect) unterstützen werden.

Hier noch ein Auszug aus meiner CSS-Datei, mit der ich auf Webseiten-Infos.de den Glüheffekt (glow effect) realisiert habe:

Mein persönliches Fazit:

• Durch das Anpassen der Abstände war für mich das Einrichten der visuellen Hervorhebung von aktiven Eingabefeldern (Formularfeldern) ganz schön zeitraubend.
• Das Ergebnis gefällt mir aber und dürfte ein weiterer kleiner Beitrag zur Verbesserung der Benutzerfreundlichkeit (Usability) als auch der Zugänglichkeit (Accessibility) sein.
• Jetzt fehlt nur noch die Unterstützung durch künftige Versionen des Internet Explorers (IE) und Opera.

Ein herzliches Dankeschön an Michael van Laar für seinen Artikel.

Wie findest Du diese CSS3-Ergänzung auf Webseiten-Infos.de?

Verbesserungsvorschläge und Anmerkungen sind willkommen.