HTML5: input Placeholder mit CSS gestalten

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

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

input placeholder
Mit CSS kann beispielsweise die Schriftfarbe des Platzhaltertextes verändert werden. In diesem Beispiel ist sie hellgrau.
input placeholder active
Klickt der Anwender in das Feld, verschwindet der Platzhalter.

Live-Demo

Demo ansehen

Dateien

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

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!



2 Kommentare

  1. Alex
    schrieb am 8. Juli 2013 um 3:09 Uhr (#)

    Merkwürdiges Verhalten zwischen FF (Version 22) und IE (Version 10).

    Der Text verschwindet beim FF nach mindestens einer Eingabe eines Zeichens, beim IE nach einem Klick.

    Die IE mit kleinerer Versionsnummer unter 10 unterstützt das Attribut nicht, gibt es da eine elegante Lösung damit das Feld trotzdem befüllt ist, wenn vor oder nach dem Feld nichts weiteres steht?

  2. Stefan
    schrieb am 8. August 2013 um 19:58 Uhr (#)

    Danach habe ich stundenlang gesucht und es dann umständlich mit einem input:valid + span.beschreibung { visibility: hidden } gemacht, den ich übereinander platziert habe. Da der IE das natürlich NICHT unterstützt, habe ich nach “CSS :invalid” gesucht und deine Seite gefunden.
    Schau doch mal, dass Du bei der Suche nach “CSS input leeren” gefunden wirst, das spart anderen leuten mglw. Nerven :)

    Danke in jedem Fall!

Kommentar verfassen

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




Du kannst folgende HTML-Tags benutzen:
<a href=""> <abbr title=""> <blockquote cite=""> <cite> <code> <em> <q cite=""> <strike> <strong>