As a UX Designer, I’m always seeking for patterns and standards to improve mine and my client’s conversion rates, and when I first saw Matt D Smith’s floating label pattern, I knew I wanted to test it on my website.
The thing is that my website took almost three years to release its beta version (because, you know, there’s always something more important to do rather than personal stuff 🙈), and after two weeks live, my mailbox had received more emails than ever before, and even though I don’t think that’s only because of the pattern, I’ve decided to create a post showing the code behind it. Here’s the pen:
A bit of background:
To be truly fair, I think both supporters and detractors have exposed valid arguments for and against the use of floating labels. Here’s Chris Coyier’s opinion on the matter, Brad Frost’s pros and cons, one of the most bitter critics, and Matt Smith’s reply to it. They’ve all made good points on their assumptions, so I’ll leave them all the theoretical stuff and focus on the practical side. Let’s dive into it!
How’s my approach built:
I relied on two awesome CSS features to create this pen: Sibling selectors and pseudo-classes. The mix of this underrated yet powerful techniques had created this result:
One of the most common concerns about floating label patterns is that the placeholder becomes the label. That’s a huge usability mistake. The trick here is that the label is not displaced: It’s visually hidden (using opacity: 0; which still makes it readable for screen readers) until you type something on the input: When the placeholder disappears, the label becomes visible. How’s that possible by using only CSS? Thanks to the :valid pseudo-class.
The :valid pseudo-class ensures that the label (sibling of the input field) becomes visible only when the input has at least one character, and the placeholder had disappeared. We do so by using sibling selectors (learn about them in an easy and fun way in this post which explains CSS selectors using cats).
There’s only one thing to consider, and it’s validating the input content: the :valid pseudo-class is used to check if there’s content inside the input, but it’s not helpful to determine if what the user had inputted is a valid email, for example. So, the :valid pseudo-class should be used with the help of any frontend validation library (in my case, Parsley, but you’re free to use whatever you like) to throw an error if the user had inputted invalid content.