CSS

Formularfelder farbig gestalten

Details

Veröffentlicht am Sonntag, 09. November 2008 17:00

Geschrieben von Jan Pionzewski

Mit CSS ist es sehr einfach möglich, die weißen bzw. grauen Formularfelder farbig zu gestalten. So können Sie diese besser in Ihr Design integrieren.

Beispiel für ein Eingabefeld:

<input type="text" style="background-color: black; color: white; border: 1px dotted red;">

Erklärung:
Mit diesem Beispiel wird ein schwarzes Eingabefeld erzeugt, das einen roten, gepunkteten Rahmen hat. Die Schriftfarbe ist weiß.

Beispiel für ein mehrzeiliges Eingabefeld:

<textarea cols="50" rows="10" style="background-color: black; color: white; border: 1px dotted red;"></textarea>

Erklärung:
Gleicher Effekt wie eben, nur mit einem mehrzeiligen Texteingabefeld.

Beispiel für eine Liste:

<select size="5" style="width: 300; background-color: darkgray;">
  <option style="color: white">Eintrag 1
  <option style="color: blue">Eintrag 2
  <option style="color: red">Eintrag 3
  <option style="color: green">Eintrag 4
  <option style="color: white; background-color: darkred">Zwischenüberschrift
  <option style="color: darkgreen">Eintrag 5
  <option style="color: darkred">Eintrag 6
  <option style="color: lightblue">Eintrag 7
  <option style="color: purple">Eintrag 8
  <option style="color: pink">Eintrag 9
</select>

Erklärung:
Das Listenfeld hat in diesem Beispiel einen dunkelgrauen Hintergrund. Die verschiedenen Einträge sind alle andersfarbig gestaltet. Sogar andere Hintergrundfarben bei einzelnen Listenoptionen sind möglich, zum Beispiel für Zwischenüberschriften.

Beispiel für einen Button:

<input type="button" value="Ich bin bunt" style="background-color: #ffe4b5; color: darkred; font-style: italic; font-weight: bold;">

Erklärung:
Dieser Button erscheint leicht gelblich, mit kursiver, fetter, dunkelroter Schrift.

Hinweis:
Wie sie vielleicht schon bemerkt haben, lassen sich die Texte beliebig mit allen möglichen CSS-Attributen formatieren. So können Sie Formulare besser an Ihr Design anpassen und für ein gleichmäßiges Erscheinungsbild Ihrer Webseiten sorgen. Doch auch hier gilt die Devise: Weniger ist manchmal mehr.