Floating Labels – CSS Tipp

Dem ein oder anderen von euch wird sicher schon beim Surfen das so genannte Floating Label für Eingabefelder über den Weg gelaufen sein und vielleicht hat sich der Eine oder Andere schon gefragt, wie man das umsetzt.

Wer nicht weiß, was Floating Labels sind, es handelt sich dabei um Labels die wie Placeholder (placeholder-Attribut eines input-Feldes) „in“ dem Eingabefeld liegen. Klickt der Nutzer nun in das Eingabefeld bewegt sich der „Placeholder“ zum Beispiel nach oben.

 

Floating-Label-Default
Eingabefeld mit Floating Label ohne Focus.

 

floating-label-focus
Eingabefeld mit Floating Label mit Focus.

Heute möchte ich euch in diesem kleinene Tutorial zeigen, wie ihr ganz einfach und mit reinem HTML und CSS, ohne eine Zeile JavaScript, diese Floating Labels umsetzen könnt.

Wie ihr sehen könnt, sind Floating Labels keine Zauberei und bedarf auch keiner Zeile JavaScript, sondern sind mit einfachen CSS-Mitteln umzusetzen.

Den wohl wichtigsten Part übernimmt hier im CSS der „+“-Selektor. Dieser weist, in unserem Falle, eine Formatierung direkt für das nach unserem input-Element folgende Label-Element zu. Um die Formatierung nur dann darzustellen, wenn der Nutzer in das input-Feld geklickt hat, geben wir dem input-Feld in unserer CSS-Anweisung noch die Pseudo-Klasse :focus mit.

Die gezeigte Umsetzung wird von jedem gängigen Browser unterstützt. Bis auf die Animation (per transition) funktioniert diese Lösung sogar im Internet Explorer 8.

Schreibe einen Kommentar

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