Apr 3, 2022

Back to all Elements

Floating Labels Interaction

A short CSS code for floating labels on a form

Webflow Project Page (to Clone)

For this to work we need a few things:

You need to have a label for each input field. Those needs to be placed as siblings right after the input field.
A short CSS code to handle the input states
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>

Preview:

browser mockup

Try avoiding using "Transition: All". It is heavy on the browser's engine.

Might also interest you:

Scaleable Vanilla JS Nested Tabs

JavaScript

Cloneable

Code

Nested tabs in an accordion template

Buttons Hover Interactions

Cloneable

Interactions

A small collection of buttons and hover interactions.

Live CSS Edit

CSS

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