Apr 3, 2022
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)

 input[type=email]:not(:placeholder-shown)~.floating-label {
   bottom: 35px;
   font-size: 11px;

 .input-text:focus {
   outline: none;




Whenever possible, use Class Names to target the elements in your interaction. You never know when you'll need to duplicate and use it somewhere else...

Might also interest you:

Live CSS Edit


An editable box of text that affects the website's CSS

Read more
White Arrow icon

3d Video Slider (swiper.js)


A 3d slider with video items, plays and pauses on click & slide change.

Read more
White Arrow icon

Webflow Dashboard Workspaces Hack

Webflow UI Hack

Convert the Workspaces dropdown to an open sidebar with custom order.

Read more
White Arrow icon