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

The videos Kurzgesagt channel creates are so beautifully animated, that I almost forget that I learn so much while watching them!

Might also interest you:

3d Video Slider (swiper.js)

Cloneable

CMS

JavaScript

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

Webflow Dashboard Workspaces Hack

Webflow UI Hack

Code

CSS

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

Glossary

Cloneable

JavaScript

CMS

A clonable for creating an Alphabetical glossary