Formularfelder farbig gestalten

Du kannst auf deiner Website mit CSS sehr einfach Formularfelder farbig gestalten. Normalerweise stellen Browser die Formularfelder nur weiß oder grau dar, womit sie meist nicht in das Designkonzept der Website passen. Somit wirken sie eher wie ein Fremdkörper. Mit CSS lässt sich das jedoch umgehen, so dass du die Formulare wesentlich besser in das Design deiner Website integrieren kannst.

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

 

Einfaches Eingabefeld farbig gestalten

Code-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). Dies kannst du mit dem Selektor :focus realisieren.

 

Code-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>

 

Mit obigem Code-Beispiel erzeugst du 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

Code-Beispiel:

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

 


Live-Anzeigebeispiel


 

Listenfelder mit einer Farbe hinterlegen

Code-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

Code-Beispiel:

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

 


Live-Anzeigebeispiel


 

Hinweis

Wie du schon bemerkt hast, machen nicht alle Beispiele in ihrer Farbgebung Sinn. Ich möchte allerdings an dieser Stelle auch nur die Möglichkeiten aufzeigen.

Du kannst die Formularfelder mit allen möglichen CSS-Attributen formatieren. So kannst du die Formulare ganz in dein eigenes Design integrieren und somit für ein gleichmäßiges Erscheinungsbild deiner Website sorgen. Wie überall gilt auch hier die Devise: Weniger ist manchmal mehr.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

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