Placeholder Animation CSS - Floating Label Animation - Move placeholder to top | No Javscript

Placeholder animation can help improve the form user experience by letting you move placeholder to top on focus and while typing so that placeholder is always visible hence improving the overall form filling experience. To create an animated placeholder text we can use label element along with the input element.
And then we can create a floating label animation by simply styling the label element to make it look like placeholder text and then animating the label element on input :focus state. We can move up the input placeholder text / label while typing in such a way that input placeholder always visible by using :input-shown state.
To move up the placeholder text we can use CSS transform and translate the placeholder text to slide it to the top.

By creating our own custom css placeholder text we can apply different placeholder css style. We can easily change the placeholder color, placholder style, placholder visibility, placeholder font and size. The interesting part is that we can easily animate the placeholder text using pure css without any javascript or jquery. We will be using :focus and :input-shown states to slide the placeholder text/label to the top while typing and on focus state on the input element.

Sometime placeholder text animation is also called floating label animation or sliding the placeholder text to the top or move up the placeholder while focus and typing. But it creates the same smooth text animation for the input placeholder.

============Awesome Videos on CSS3=============

Responsive Login Form with Animated Placeholder Text - HTML, CSS & Javascript in 2020

How to Apply Gradient Animation on button background in CSS

Clip image to text using CSS background-clip | CSS Text Knockout Effect

CSS Sticky Header - Fixed Navigation Menu Bar on Scroll using HTML5 and CSS3

Creating Automatic CSS Image slider with CSS3 animation & HTML5 | No Javascript or Jquery - Tutorial

Simple Responsive Navigation Menu Bar with Logo on Left Using HTML5 and CSS3 Flexbox - Tutorial

How to Create Masonry Layout CSS3 & HTML5 - Material Design Card Based Pinterest Like Column Layout

How to Create Download Link in HTML5 | Making Direct Downloadable Button for Any File Type

How to Create Simple HTML5 / CSS3 Preloader Animation | Circular Spinner Preloader - Youtube

How to add a Preloader in Website using HTML, CSS and Javascript

Source Code:

Find all the source codes here:

Follow on Twitter

Add on Facebook

Like Page on Facebook

Share this video and Subscribe to this channel for latest updates and web design tips and techniques.

---------------------------------------------Attributions----------------------------------------------
Thumbanil Arrow Credit:

[Mmzhran]

It was fun because of the way you explained it! Thank you for this good video.

[g-kems]

Thank you for this well explained tutorial!

[santoshkumarsethi]

It's amazing. Less coding and it's done.

[RockingLicks]

My labels disappear on text input. Any idea why?

[NedumEze]

Oh! So helpful. Thanks.
Maybe, see if you can do a dynamic multilevel drop-down menu with css only. Sure, it is challenging. Couldn't do it myself.

[JayakrishnanBMenon]

My input box is also getting transformed and scaled on typing. Please help !

.input:focus +label, .input:not(:placeholder-shown) {
color: black;
transform: scale(0.7) ;
}

My input has a className="input" and I have added a classname for label as "placeholder".
Please help !

[cricketstatus]

Done but clicking on label it just get selected like text give the solution

[pinkrosemoli]

nice video! Could you please update the source code link? Because it's not correct. Thank you!