Bereits im Tipp 22 wurde gezeigt, wie sich Formularelemente mit CSS formatieren lassen. Eine interessante und zum Ausfüllen von Formularen durchaus nützliche Anwendung ist das Einfärben der Eingabefelder, wenn diese per Mausklick oder mittels TAB-Taste angesteuert werden, d. h. den Eingabefokus erhalten oder verlieren.

Im IE sowie in Netscape 6 bzw. Mozilla (getestet mit Milestone 19, aka Mozilla 0.6) lassen sich CSS-Eigenschaften dynamisch mittels object.style.eigenschaft=wert zuweisen. Im folgenden Beispiel werden die JavaScript-Events OnFocus bzw. OnBlur in den INPUT-Tags verwendet. Die zugehörigen Funktionen realisieren die Änderung der Vorder- bzw. Hintergrundfarben und des Schriftgewichtes (normal bzw. bold):

      function FocusCol(obj)
      {
        if (document.getElementById || document.all)
        {
        obj.style.color="#FFFFFF";
        obj.style.backgroundColor="#FF0000";
        obj.style.fontWeight="bold";
        }
      }


      function BlurCol(obj)
      {
        if (document.getElementById || document.all)
        {
        obj.style.color="#0000FF";
        obj.style.backgroundColor="#FFFFCC";
        obj.style.fontWeight="normal";
        }
      }


      Funktionsaufruf:

      <FORM ...>
        <INPUT TYPE="text" SIZE="50" OnFocus="FocusCol(this)"
         OnBlur="BlurCol(this)">
      </FORM>
      

Beispiel 42 funktioniert mit den genannten Browsern unter Windows (IE 5+, NN 6, Mozilla) und Linux (NN 6, Mozilla), nicht jedoch mit Opera 4/5 und nur teilweise mit dem Konqueror (KDE 2.0 / Linux – lediglich Font-Weight zeigt eine Veränderung).