CSS Only Floated Labels with :placeholder-shown pseudo class

by · October 5, 2018

The Floated Labels Technique

When we’re dealing with inputs, there’s a host of techniques to consider in order to give users the best experience. We need to make sure that we’re giving users necessary information at all points in time, and that means finding the balance between too much and too little. Two pretty important pieces to the UX puzzle are:

The label element which according to the MDN, is the only way to provide explanatory information about a form field that is always appropriate

The placeholder attribute for the input element, which according to the MDN, lets you specify a text that appears within the <input> element’s content area itself when empty. It’s intended to be used to show an example input, rather than an explanation or prompt.

These two elements can be used in tandem to create instructive form UI, and one pleasant way of doing so is what I call the “floated label technique”. In this UI implementation, the user encounters this flow:

They see an input with a placeholder showing some descriptive example input, and the label is initially hidden.

When they focus on the input and start typing, the meaningful label animates and floats above the input.

As long at the input has a value, the label remains visible and floated above the input to remind users the original meaning of the input

This UI technique does indeed slightly bend the definitions of label and placeholder listed above, in the sense that we’re giving the placeholder more initial importance in having to explain the input to the user, but it’s a tradeoff for a neat UI component, and one that I’m personally comfortable making. Here’s a quick preview of what we’re going to build.

Floating Labels With Only CSS

Registering a focus event, determining if an input has value, animating a hidden element into view, deciding whether it needs to stay in view or not depending on input value… this seems like a job for JavaScript, right? Wrong! We’re gonna use a neat CSS pseudo class, :placeholder-shown, to achieve the effect. From the MDN:

The :placeholder-shown CSS pseudo-class represents any <input> or <textarea> element that is currently displaying placeholder text.

In other words, if an input has any value in it, we can safely assume that the :placeholder-shown pseudo class will never be reached in our CSS.

Here’s the train of thought I came up with to achieve the floated labels technique using this info:

Structure my markup such that I could target my label as a adjacent sibling combinator from my input, and wrap the two elements in a containing div.

And here’s the CSS scaffolding with some comments about what’s happening at each step. The final demo down below has the full CSS, which is written up with CSS variables for easy modification and maintenance.

Full Demo In Action

If any of the above was unclear, here’s a full working demo in action for you to take a look over!

See the Pen CSS Only Floated Labels by Nick Salloum (@callmenick) on CodePen.

Browser Support

Support is pretty good so far, with IE & Edge falling behind:

Chrome: 47+

Firefox: 51+

IE: No support

Edge: No support

Opera: 34+

Safari: 9+

You can get around lack of support by using some fun CSS browser hacks to target IE and Edge browsers for some conditional styles to the input and label.

Wrap Up

And that’s a wrap! I love when I discover new things in CSS, but I love even more when I can find neat ways to make them applicable. I hope you learned something and can come up with fun new ways to use the :placeholder-shown pseudo class. Thanks again for reading, and if you have and questions, comments, or feedback, feel free to send me a tweet.