Aktives Formularelement farbig hinterlegen

[AK_CCM]

Hallo zusammen,

hoffentlich habe ich für meine Fragestellung mit "CSS" den richtigen Themenbereich gewählt, da ich mir vorstellen kann, dass meine Frage auch in die Rubrik "JAVASCRIPT" passt.

Vor kurzem habe ich beim 1&1 Webmailer Login https://webmail.1und1.de bemerkt, dass sich die Hintergrundfarbe des jeweiligen aktiven Eingabefeldes ändert. Dies erachte ich besonders im Hinblick auf Personen mit Sehschwächen als sehr benutzerfreundlich.

Deshalb möchte ich dieses "stylistische Element" für eine Eingabemaske nutzen. Die Frage ist nur, wie sich der Wunsch crossbrowser-kompatibel umsetzen lässt. Soweit ich weiß, wird die Pseudoklasse :active nicht von allen Browsern unterstützt?

Ferner gebe ich zu, dass ich keine Ahnung habe, ob sich die Pseudoklasse auch auf Formularelemente anwenden lässt. Wichtig wäre zudem, dass sich nicht nur die die Hintergrundfarbe von Eingabefeldern sondern auch die von Pulldown-Listen ändern lässt.

Falls letzteres nicht möglich ist, habe ich mir überlegt, die Pulldown-Listen durch "Autovervollständigen-Eingabefelder" zu ersetzen - sofern es so etwas in der Art überhaupt gibt. Damit könnte man zudem schneller durch die Listen navigieren, insbesondere wenn diese viele Einträge enthalten.

Wäre euch sehr dankbar, wenn ihr mir bei meinem (zumindest für mich) kniffligen Problem weiterhelfen könntet.

Gruß, Andreas

[Gunnar Bittersmann]

Hello out there!

hoffentlich habe ich für meine Fragestellung mit "CSS" den richtigen Themenbereich gewählt,

Ja, das schon ...

Soweit ich weiß, wird die Pseudoklasse :active nicht von allen Browsern unterstützt?

... aber nicht die richtige Pseudoklasse. Du meinst 'http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=:focus'.

See ya up the road,
Gunnar

[Der Martin]

Hallo,

Soweit ich weiß, wird die Pseudoklasse :active nicht von allen Browsern unterstützt?
... aber nicht die richtige Pseudoklasse. Du meinst 'http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=:focus'.

und das wird leider gerade beim meistverbreiteten Browser, dem IE6, nur für Links unterstützt, nicht für Formularelemente. Für IE6 und älter muss man den Effekt daher tatsächlich mit Javascript realisieren. Der Eventhandler onfocus und entsprechende Modifikationen des style-Objekts oder der Eigenschaft className dürften zum Ziel führen.

So long,
 Martin