Floating Labels– With Only CSS
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.
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:
<form>
<div class="field">
<input type"text" required>
<label>Full Name</label>
</div>
</form>This first class is mostly optional, the class for your <input> tag:
input {
font-size: 18px; /* font-size is up to you, not required */
padding: 10px; /* padding is up to you */
display: block; /* just to make sure display is block */
width: 100%; /* width is up to you */
}The second class determines how your <label> will look prior to user interaction:
label {
font-size: 18px; /* up to you, I matched the <input> style */
font-weight: normal; /* up to you, not required */
left: 10px; /* determines space to left of label */
top: 13px; /* determines space above label */
pointer-events: none; /* enables click through on label */transition: 0.2s ease all; /* determines animation during */
-moz-transition: 0.2s ease all; /* user interaction */
-webkit-transition:0.2s ease all;
}
The third and final class is just styling how the <label> will change upon user interaction:
input:focus ~ label, input:valid ~ label {
top: -20px; /* where the label goes upon interaction */
font-size: 14px; /* font-size change on interaction */
}If you have more than a single field, be sure to wrap the <input> and <label> in a relative positioned <div> so that each label and input stay together.
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!
Would you like to see more posts like this one? You should go like my company on facebook: https://www.facebook.com/idea42co/ or if you’re more of a twitter-er: https://twitter.com/idea42co
