CSS für Formular-Eingabefelder und Textfelder

Heute hat mir eine Leserin mitgeteilt, dass die Eingabefelder in meinem Kontaktformular kaum lesbar sind, weil die Schrift so kein ist. Ich habe mir das kurz angeschaut und konnte ihr nur zustimmen: Die Schriftgröße lag deutlich unter der des Fließtextes in meinem Blog. Um dies anzupassen, kann man in den Theme-Einstellungen ein Custom-CSS einfügen, über das man die Eingabefelder und Textfelder im Formular optisch verändern kann.

CSS-Klasse für Formular als Ansatzpunkt

Um ein Formular zu verändern, gibt man ihm am besten eine Klasse mit, die man dann im CSS definiert. Im HTML-Quellcode des Formular-Tags sieht das so aus:

<form action="/kontakt/" method="post" class="wpcf7-form" >

Im CSS selbst kann man dann die Definition mit Änderungen von Schriftgröße und anderen Attributen vornehmen:

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea
{ font-size:120%; color: #333333;}

Die Bezeichnung “wpcf7-form” ist in diesem Beispiel die Klasse, die das Plugin für das Kontaktformular vorgibt. Ihr könnt sie natürlich benennen, wie ihr möchtet.

Auch könnt ihr bei den Attributen kreativ sein. Da kann man zum Beispiel Bilder als Hintergründe für Textarea-Elemente nutzen oder auch mit den Schriftfarben und Schriftarten spielen. Hier alle Möglichkeiten aufzuführen, würde den Rahmen sprengen.

Select- und Option-Elemente

Für mein minimalistisches Formular benötigte ich diese beiden Gruppen zwar nicht, aber wer auch Option-Felder und Select-Boxen umgestalten möchte, kann dies mit folgenden CSS-Einträgen tun:

.wpcf7-form optgroup { font-size:15pt; color: #ff0000;}
.wpcf7-form select { width: 250px; font-size: 1.2em;}

Ich hoffe, ich konnte euch mit dieser kleinen Anleitung bei euren CSS-Basteleien an HTML-Formularen helfen. Wenn ihr Ergänzungen oder Fragen habt, fügt diese gerne als Kommentar hinzu.

Jens Kleinholz( Gründer & Sir Apfelot )

Seit 2012 betreibe ich meinen Blog als Sir Apfelot und helfe meinen Lesern bei technischen Problemen. In meiner Freizeit flitze ich auf elektrischen Einrädern, fotografiere mit meinem iPhone, klettere in den hessischen Bergen oder wandere mit meiner Familie. Meine Artikel behandeln Apple-Produkte, Drohnen-News und Lösungen für aktuelle Bugs.