HTML5: input Placeholder mit CSS gestalten

Diese Seite ist Teil einer Artikelserie, die sich mit der Gestaltung von HTML5-Formularen beschäftigt.

• Teil 1: Das Required-Attribut
• Teil 2: Das Placeholder-Attribut
• Teil 3: Der Input-Typ email
• Teil 4: Der Input-Typ url

Das Placeholder-Attribut

Mit dem placeholder-Attribut kann vorgegebener Text in Formularfeldern angezeigt werden. Der Platzhalter verschwindet, sobald der Anwender das Feld anklickt.

Der Internet Explorer unterstützt das placeholder-Attribut noch nicht. Mit ein paar Zeilen jQuery kann man dieses Problem aber beheben.

Mit den Selektoren ::-moz-placeholder, ::-webkit-input-placeholder und :-ms-input-placeholder wird das placeholder-Attribut angesprochen und kann so mit CSS gestaltet werden.

Beispiele

Mit CSS kann beispielsweise die Schriftfarbe des Platzhaltertextes verändert werden. In diesem Beispiel ist sie hellgrau.

Klickt der Anwender in das Feld, verschwindet der Platzhalter.

Live-Demo

Demo ansehen

Dateien

• index.html

CSS-Code

<style type="text/css">
	::-moz-placeholder {color:#ddd;}
	::-webkit-input-placeholder {color:#ddd;}
	:-ms-input-placeholder {color:#ddd;}
</style>

HTML5-Code

<input type="email" name="email" placeholder="name@domain.tld" />

Wei­ter zu Teil 3 die­ser Serie: Der Input-Typ email

Über den Autor

Marco Bardenheuer: Auf skybeam.de schreibt Marco über Webentwicklung, Webdesign und Internetmarketing. Verpasse keine Neuigkeiten über User Experience Design, Web Development und die Startup-Szene: Folge Marco jetzt auf Google Plus!