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:

Bildschirmfoto des Suchfelds mit Glüheffekt

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)):

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
input[type=text], textarea {
border: 1px solid #0C5005;
background: #FFF;
padding: 3px;
color: #111;
}
#searchform input[type=text] {
width: 8.6em;
display: inline;
float: left;
color: #2F6325;
margin-left: 4px;
margin-top: 4px;
}
#wpcf7-f1-p15-o1 p {
margin-left: 4px;
}
input:focus:nth-of-type(1n),
textarea:focus:nth-of-type(1n) {
outline: 0;
-webkit-box-shadow:
-2px -2px 2px #F99D41,
2px -2px 2px #F99D41,
-2px 2px 2px #F99D41,
2px 2px 2px #F99D41;
-moz-box-shadow:
-2px -2px 2px #F99D41,
2px -2px 2px #F99D41,
-2px 2px 2px #F99D41,
2px 2px 2px #F99D41;
}

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.

Webseite merken und weiterempfehlen

7 Kommentare und 1 Trackback/Pingback

  1. [...] Dieser Eintrag wurde auf Twitter von Dieter Welzel erwähnt. Dieter Welzel sagte: Aktive Eingabefelder visuell hervorheben http://tinyurl.com/33hmd59 [...]

  2. 2. Fritz

    Kommentar vom 16. Mai 2010 um 16:48

    Hallo Dieter,

    ich mach’ das auch beim Hovern. Warum? Hab’ nicht drüber nachgedacht, ging irgendwie automatisch.
    PS: die zwei Farben (grüner Rahmen und orange Glow) sind nicht ganz mein Geschmack. Aber über den lässt sich ja bekanntlich nicht streiten.

  3. 3. Dieter

    Kommentar vom 16. Mai 2010 um 17:00

    Hallo Fritz,

    doch über Geschmack lässt sich auch streiten, nur es bringt nix. ;-)

    Testweise werde ich mal den Rahmen beim Hovern ebenfalls Orange machen. Mal schauen wie das wirkt und unser beider Geschmack treffen könnte. :-)

    Habe gerade erst wahrgenommen, dass auf Deiner Seite das Suchfeld auch einen Glüheffekt hat. Nur ist der Grau und damit sehr dezent. ;-)

  4. 4. Dieter

    Kommentar vom 16. Mai 2010 um 17:06

    Hallo Fritz,

    also jetzt ist border auch beim Hovern ebenfalls Orange (Farbton vom “Zitatbalken”).

    Mir gefällt es nun besser. Dir auch?

    Beste Grüße
    Dieter

  5. 5. Fritz

    Kommentar vom 16. Mai 2010 um 18:16

    De gustibus non est disputandum.

    Aber niemand kann mich daran hindern, mein persönliches Urteil abzugeben:
    Mir gefällt’s jetzt viel besser.

  6. 6. Dieter

    Kommentar vom 16. Mai 2010 um 18:21

    Lieber Fritz,

    Dein persönliches Urteil schätze ich und es freut mich sehr, dass es Dir sogar viel besser gefällt.

    Danke für Deine Rückmeldung.

    Beste Grüße
    Dieter

  7. 7. Michael van Laar

    Kommentar vom 17. Mai 2010 um 11:22

    An die Checkboxen im Opera hatte ich in meinem Artikel gar nicht gedacht, weil ich in den Formularen meiner Website bisher keine Checkboxen verwende. Danke für den Hinweis.

    Generell ist die bescheidene box-shadow-Unterstützung von Opera natürlich ein Ärgernis. Ich habe bei mir die box-shadow-Anweisung ohne Rendering-Engine-Kürzel trotzdem ins Stylesheet geschrieben, um zukunftssicher zu sein. Bei meiner eigenen Site ist das natürlich egal. Aber auf diese Weise bin ich bei Websites, an denen ich nicht ständig bastle, auf der sicheren Seite. Und die rund 2 Prozent der Besucher (zumindest bei meiner Website), die Opera verwenden, müssen da einfach durch.

  8. 8. Dieter

    Kommentar vom 17. Mai 2010 um 21:42

    Auf die Besonderheit, dass beim Opera input mit border bei Checkboxen zu Darstellungsproblemen führt, hatte ich in meinem Blogbeitrag “Checkbox-Problem mit IE und Opera” beschrieben und die Lösung dazu unter “Opera: Checkboxen korrekt darstellen” vorgestellt.

    Die box-shadow-Unterstützung vom Opera funktioniert übrigens bei den DIVs für den Schlagschatten rechts und unten hier gut. Bescheiden wird sie aber bei der Darstellung des Glüheffekts um Eingabefelder (input[type=text] und textarea).

    Laut meiner Statistik (chCounter) kommen über 4% der Besucher mit dem Opera auf Webseiten-Infos.de. Die sollen auch eine ordentliche Darstellung sehen. Deshalb habe ich box-shadow ohne Präfix bei meiner CSS-Datei herausgenommen.

    Aber ich gebe die Hoffnung nicht auf, dass eine künftige Opera-Version das Darstellungsproblem beim Glüheffekt nicht mehr aufweist und dann kommt bei mir einfach box-shadow ohne Präfix bzw. mit dem Präfix -o dazu.

Kommentar schreiben (Datenschutzerklärung)

Kommentarformular





Erstkommentare und Kommentare mit Links werden moderiert.

Übersicht der Tastaturkürzel für Smilies

Abonnieren ohne einen Kommentar abzugeben