adaptive platzhalter mit css

CSS/LESS: Adaptive Platzhalter in Formularen

Eine interessante Technik für interaktive Labels und Platzhalter in HTML-Formularen zeigt Danny von CircleCi.
Hier wird das Label, solange das Input Field inaktiv ist, innerhalb des Input Fields positioniert und mit als Platzhalter genutzt. Sobald der Fokus auf dem Input Field liegt oder Text eingegeben wurde, wandert das Label in den oberen Border und verbleibt dort.

Das Ganze kommt nur mit CSS und ohne einen Schnipsel Javascript aus. Nützlich ist auch, dass der Author es gleich als LESS-Mixin zur Verfügung stellt.

CSS/LESS: Adaptive Platzhalter

Themeforest WordPress Themes

Hinterlassen sie einen Kommentar

XHTML: Folgende HTML-Tags können verwendet werden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>