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 )

Jens betreibt das Blog seit 2012. Er tritt für seine Leser als Sir Apfelot auf und hilft ihnen bei Problemen technischer Natur. Er fährt in seiner Freizeit elektrische Einräder, fotografiert (natürlich am liebsten mit dem iPhone), klettert in den hessischen Bergen rum oder wandert mit der Familie. Seine Artikel beschäftigen sich mit Apple Produkten, Neuigkeiten aus der Welt der Drohnen oder mit Lösungen für aktuelle Bugs.