Floating labels with pure CSS

Floating labels in input fields are a design pattern that is here to stay. Google's Material design guidelines contain a section describing how they fit in the new design. While this example may be Android-centric, floating labels offer some great usability benefits for user interaction with forms, especially on smaller mobile screens where there is little room to show labels all the time.

If you want to try them in your next responsive or mobile project, here's a way to use them without any Javascript whatsoever:

See the Pen neyCp by Nikola (@nickplesha) on CodePen.

I've styled this example to look like Android to show how easy it is to make it look however you want.

To break it down how this works: using the required attribute on the input fields allows us to apply styling for the :validstate when the input fields has content. Using a CSS transition we achieve the behavior we need. We also add styling on :focus to communicate to the user that the field is selected.

There are some truly awesome examples of floating labels on the web that inspired me, with placeholders that move out of the way and feature nice animation, but I've opted for a much simpler approach mainly because of Chrome auto-fill. The problem is that when the browser fills the input field, the placeholder text doesn't move out of the way since the auto-fill doesn't behave the same way as manual input. This makes it hard to use for e.g. login forms.

Hopefully, this simple example helps you on your way to including floating labels in your project. To see many more examples, check out this blog post by Matt D. Smith that explains how he came up with the concept and has many links to great implementations: mattdsmith.com/float-label-pattern

← Other posts