Floating Labels– With Only CSS

Author: admin | June 20, 2016

Preface–I am not a developer. A designer, born and raised with some front-end experience, with limited JS knowledge, I like to find pure CSS solutions for fun.

Floating labels really took precedence with the launch of Google’s Material Design. They have been widely accepted because of solving the age-old UX argument between multiple form input field solutions.

 

What is a Floating Label?

A floating label is basically an inline label inside of an input field that floats above of the input box upon interaction. This enables the user to still see what the input field was originally requesting even after they have typed their answer.

 

 

Example of Google’s floating labels

 

Before these floating labels became popular, UX designers went back and forth between inline labels and right/left aligned labels. Inline labels were great for scan-ability and condensing information. But they fell weak after the user interacted with them and could no longer see what the input field was requesting. The floating label combines both of these solutions into an awesome user experience.

 


 

How

There are many ways to incorporate floating labels into your form. This way is CSS only (ofcourse) and it’s actually quite simple. So simple, in fact that you only really need 2-3 css classes.

My basic HTML:

The container div is optional. Be sure to add “required” to your <input> tag

 


 

This first class is mostly optional, the class for your <input> tag:

 


 

The second class determines how your <label> will look prior to user interaction:

 


 

The third and final class is just styling how the <label> will change upon user interaction:

 


 

And you’re done! Yay!

Below are some codepens that I put together to help you. The first one listed is a super basic example using the same 3 styles that I described above. The second is an example of how you can fit floating labels into your design.

Enjoy!