Formularfelder sollen in erster Linie natürlich ihrem Zweck dienen, allerdings wirken sie roh ziemlich langweilig und leblos. In diesem Tutorial zeige ich euch, wie ihr eure Formularfelder mit CSS gestalten könnt.

Formularfelder gestalten mit CSS

Zuerst zeige ich euch wie ein normales Formularfeld aussieht, welches wir mit input erzeugen.

Wir sehen, dass das Feld optisch nicht viel hergibt. Außerdem stellen wir beim Ausfüllen fest, dass unser eingetragener Text in der Box kaum Platz hat und unmittelbar an den Rändern entlang läuft. Nach einigen CSS-Anpassungen wird das jedoch ganz anders aussehen!

Zum Gestalten

Um das Feld anzupassen, sprechen wir in unserer CSS-Datei „input“ an. Ich werde das Feld mit folgenden Werten gestalten:

input {
	border:1px solid #d9d9d9;
	border-radius:4px;
    -webkit-border-radius:4px;
	padding:8px 13px;
}

Das Ergebnis

Im Grunde haben wir nicht viel verändert. Wir haben dem Feld einen Rahmen gegeben, die Ecken um 4 Pixel abgerundet und das wichtigste: wir haben dem Formularfeld einen Innenabstand von oben und unten 8 Pixel und rechts / links 13 Pixel gegeben. So hat der eingegebene Text viel Platz und wirkt nicht so eingeengt.

Mit wenig Code haben wir somit ein Formularfeld schnell aufgewertet. Natürlich sind euch bei der Effektierung mit CSS keine Grenzen gesetzt, doch gerade bei Formularfeldern ist weniger definitiv mehr. Wichtig: Textfelder werden anders behandelt. Um diese zu gestalten muss „textarea“ angesprochen werden.

Falls Fragen bestehen, können sehr gerne Kommentare hinterlassen werden.

Smalltalk-Ecke

Hat Dir der Artikel gefallen oder möchtest Du am Inhalt etwas ergänzen? Hast Du weitere Fragen dazu? Lass uns gerne dazu austauschen. Ich freue mich von Dir zu hören! :)


Schreibe einen Kommentar

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

Werde Teil unserer Community

Abonniere unseren kostenlosen Newsletter und wir informieren Dich regelmäßig über neue, spannende Artikel im Bereich Webentwicklung, die Programmierung von Mobile Apps, SEO und mehr!

Wir halten deine Daten privat und teilen sie nur mit Dritten, die diesen Dienst ermöglichen. Lies unsere Datenschutzerklärung.
Kostenloser Newsletter

Bleibe auf dem Laufenden!

Wir informieren Dich regelmäßig über neue, spannende Artikel im Bereich Webentwicklung, Programmierung von Mobile Apps, SEO und mehr!

Wir halten deine Daten privat und teilen sie nur mit Dritten, die diesen Dienst ermöglichen. Lies unsere Datenschutzerklärung.