Floating Labels

Go to Source

See the Code
See it Full Page
See Details

Click the field and the label will scale down and move up. Looks fancy and more importantly the fields expected value is still crystal clear to the user.

Resources:
– https://github.com/jverdi/JVFloatLabeledTextField
– http://littlebigdetails.com/post/82478225432/circleci-once-activated-the-input-placeholders

This Pen uses: HTML, CSS, JavaScript, and -css_prefix