White Arrow icon
Back to all Elements

Floating Labels Interaction

A short CSS code for floating labels on a form

For this to work we need a few things:

  1. You need to have a label for each input field. Those needs to be placed as siblings right after the input field.
  2. A short CSS code to handle the input states
  3. On an Email field, you must have a placeholder text (a blank space or transparent text can work great)

<style>
 input:focus~.floating-label,
 input:not(:focus):valid~.floating-label,
 input[type=email]:not(:placeholder-shown)~.floating-label {
   bottom: 35px;
   font-size: 11px;
 }

 .input-text:focus {
   outline: none;
 }
</style>

Copy

Preview:

browser mockup
Share:
Heart icon

Michael's Vsauce was my gateway Youtube channel to the world of fun educational vlogs. This was the 1st video I stumbled upon.

Might also interest you:

Dynamic Height

Code
Tricks
JavaScript

A (custom code) solution that combines CSS variables and Vanilla JavaScript for the shrinking / growing of browser top & bottom bars.

Read more
Blue arrow iconWhite Arrow icon

Desktop Grid, Mobile Slider

Cloneable
Tricks
Layout

Change Webflow's Slider to act as a "regular" grid block on desktop, but go back to Slider on Tablet and smaller screens.

Read more
Blue arrow iconWhite Arrow icon

Maintain Form Height on Success

Code
jQuery

Using a little bit of jQuery to adjust the success message height

Read more
Blue arrow iconWhite Arrow icon