Hier bist Du: Home « Tipps und Tricks « Farbige Formularelemente

Tipps und Tricks: Farbige Formularelemente

Formularelemente sind standardmäßig weiß, bzw. grau. Mit CSS lassen sich aber auch farbige Elemente erstellen. Leider akzeptieren nur die neueren Browser ab der Generation 5 die meisten Angaben. Besonders der Rahmen stellt noch ein Problem dar.

Eingabefeld mit farbigem Hinter- und Vordergrund und Rahmen

Internet Explorer 4.0, Netscape 6.x, Opera 7.0, Mozilla 1.0, Mozilla Firefox 0.8 
<input type="text"
 style="background-color:#eeeeee;color:#0055cc;
	border:1px solid #ff0000;" />

 

Mehrzeiliges Eingabefeld mit farbigem Hinter- und Vordergrund

Internet Explorer 4.0, Netscape 6.x, Opera 7.0, Mozilla 1.0, Mozilla Firefox 0.8 
<textarea cols="40" rows="8" 
style="background-color:#eeeeee;color:#0055cc;">
</textarea>

 

Liste mit schwarzem Hintergrund und farbigen Einträgen

Internet Explorer 4.0, Netscape 6.x, Opera 7.0, Mozilla 1.0, Mozilla Firefox 0.8 
<select size="4" style="width:200;background-color:#000000;">
  <option style="color:#ffff00;">Eintrag 1</option>
  <option style="color:#0000ff;">Eintrag 2</option>
  <option style="color:#00ff00;">Eintrag 3</option>
  <option style="color:#00ffff;">Eintrag 4</option>
  <option style="color:#ff0000;">Eintrag 5</option>
  <option style="color:#ff00ff;">Eintrag 6</option>
  <option style="color:#ffffff;">Eintrag 7</option>
 </select>

 

Farbiger Button

Internet Explorer 4.0, Netscape 6.x, Opera 7.0, Mozilla 1.0, Mozilla Firefox 0.8 
<input type="button" value="Klick mich"
style="background-color:#ffe4b5;color:#000000;
font-style:italic;font-weight:bold;">

Eine Übersicht aller CSS-Angaben findest Du in in den Eigenschaften A-Z.