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:

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.

Schreibe einen Kommentar

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