Formularfelder farbig gestalten

Du kannst auf deiner Website mit CSS sehr einfach Formularfelder farbig gestalten. Normalerweise stellen Browser die Felder in einem Formular nur weiß oder grau dar. Dadurch passen sie meist nicht in das Designkonzept der Website. Sie wirken somit eher wie ein Fremdkörper. Mit CSS lässt sich das jedoch ändern. So kannst du die Formulare wesentlich besser in das Design deiner Website einbinden.

Wie das funktioniert, zeige ich dir in diesem Artikel unter anderem auch anhand einiger Live Beispiele.

 

Einfaches Eingabefeld farbig gestalten

Ein einfaches Eingabefeld lässt sich mit CSS sehr einfach farbig gestalten.

 

Beispiel:

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

 


Live Anzeigebeispiel


 

Eingabefeld im Fokus gestalten

Du hast mit CSS ebenfalls die Möglichkeit, ein Eingabefeld dann zu gestalten, wenn es im Fokus liegt (also ausgewählt ist). Und zwar kannst du dies mit dem Selektor :focus realisieren.

 

Beispiel:

<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
 background-color: yellow;
}
</style>
</head>
<body>

<form>
Vorname: <input type="text" name="vorname"><br>
Nachname: <input type="text" name="nachname">
</form>

</body>
</html>

 

Durch das obige Snippet erzeugst du dabei zwei Eingabefelder. Diese ändern ihre Hintergrundfarbe erst dann zu gelb, wenn der Fokus in diesen Feldern liegt.

Du kannst dir dazu selbstverständlich auch ein Anzeigebeispiel ansehen.

 

Mehrzeilige Eingabefelder färben

Auch mehrzeilige Eingabefelder lassen sich ebenso einfach einfärben.

 

Beispiel:

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

 


Live Anzeigebeispiel


 

Listenfelder mit einer Farbe hinterlegen

Bei Listen reichen die Möglichkeiten dazu noch weiter. Du kannst dabei jede einzelne Zeile separat einfärben und anders gestalten. Das folgende Beispiel dazu ist sehr bunt.

 

Beispiel:

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

 


Live Anzeigebeispiel


 

Buttons farbig gestalten

Auch Buttons kannst du entsprechend anpassen. Dir steht die ganze Palette an CSS Attributen dabei zur Verfügung.

 

Beispiel:

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

 


Live Anzeigebeispiel


 

Fazit

Mit CSS lassen sich also ganz einfach die Formularfelder farbig gestalten. Die hier gewählten Farben sollen dabei nur die Möglichkeiten aufzeigen, die es gibt. Dass sie von der Farbgebung her wenig Sinn ergeben ist klar. Du kannst hierzu die ganze Palette an CSS Attributen für die Gestaltung verwenden. Somit lassen sich die Formulare ganz in dein eigenes Design integrieren. Dies sorgt schließlich für ein einheitliches Erscheinungsbild deiner Website.

Es macht dabei auch keinen Unterschied, welches Feld des Formulars man anpassen möchte. Die oben genannten Beispiele decken dazu auch nicht alle Formularfelder ab. Denn es sind bspw. weitere Formularfelder mit HTML 5 hinzugekommen. Diese lassen sich aber analog der hier genannten Beispiele ebenfalls entsprechend anpassen.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.