Erstellen eines schönen Textfelds

Ein Textfeld ist ein Element auf einer Webseite, in das Sie tippen können. Diese werden häufig als Kommentarbereiche, Kontaktformulare oder Adresseingabebereiche verwendet. Alle Browser haben Standardstile für Textfelder, die variieren. Sie können die Kontrolle über Ihre Textfelder übernehmen und sie mit CSS gestalten, genau wie jedes andere Element.

textarea#styled {
	width: 600px;
	height: 120px;
	border: 3px solid #cccccc;
	padding: 5px;
	font-family: Tahoma, sans-serif;
	background-image: url(bg.gif);
	background-position: bottom right;
	background-repeat: no-repeat;
}

In diesem Fall haben das Textfeld mit der ID „styled“ eine explizit festgelegte Breite und Höhe, einen angewendeten Rand und Abstand, eine Standard-Schriftart und ein angewendetes Hintergrundbild.

Textfelder unterstützen auch einige andere Funktionen, die Ihnen helfen, ihr ästhetisches Verhalten zu steuern. Nämlich „onfocus“ und „onblur“, die Sie Inline anwenden und JavaScript-Befehle geben können, wie hier:

<textarea name="styled-textarea" id="styled" onfocus="this.value=''; setbg('#e5fff3');" onblur="setbg('white')">Enter your comment here...</textarea>

Dies ändert die Hintergrundfarbe des Textfelds zu einem hellgrünen Farbton, wenn es aktiv ist, und zurück zu weiß, wenn es inaktiv ist. Fügen Sie dieses einfache Skript einfach irgendwo auf Ihrer Seite ein*

function setbg(color)
{
document.getElementById("styled").style.background=color
}

*Erstellen Sie entweder eine .js-Datei und verlinken Sie sie in Ihrem Header oder fügen Sie sie in ein <script type=”text/javascript”>-Tag ein.

Sehen Sie all dies in Aktion auf der Beispielseite.

[LIVE-BEISPIEL]