CSS für Formular-Eingabefelder und Textfelder

Eingabefelder in Formularen per CSS ändern und umgestalten.

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.

Eingabefelder in Formularen per CSS ändern und umgestalten.

Eingabefelder in Formularen per CSS ändern und umgestalten.

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.

 

Hinweis: Als Amazon-Partner verdiene ich an qualifizierten Käufen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.