Textfelder in Formularen mit CSS gestalten

Damit Textfelder in Formularen nicht immer so einseitig und langweilig aussehen, zeige ich hier wie man diese mit CSS schöner gestalten kann.

Ein Textfeld fügt man mit folgendem Tag ein:

<form action="irgendwas" method="post">
<input type="text" name="name" size="30">
</form>

Dieses Textfeld würde so aussehen:

Wenn wir jetzt noch CSS einfügen in das Textfeld, sieht es schon viel schöner aus:

<input type="text" name="name" size="30" style="border: 1px red solid;">

Und zwar folgendermaßen: