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)

<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:

Scaleable Vanilla JS Nested Tabs

JavaScript
Cloneable
Code

Nested tabs in an accordion template

Read more
Blue arrow iconWhite Arrow icon

Buttons Hover Interactions

Cloneable
Interactions

A small collection of buttons and hover interactions.

Read more
Blue arrow iconWhite Arrow icon

Live CSS Edit

CSS

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

Read more
Blue arrow iconWhite Arrow icon