Animated Floating Input Labels Pure CSS

Learn how to create floating input label animations for your webforms in this tutorial. Use the placeholder text to animate the label up above the form input for better user experiences when filling out the form details! We'll use placeholders, labels, and a few CSS tricks to create the final animation.
💖 SUBSCRIBE (Please) 💖
kzbin.info?s...
🙏 Become a Patron for support! 🙏
/ followandrew
📢 Social Media 📢
TWITTER (@followandrewedu) ➞ / followandrewedu
#floating #css #input #label

[@FollowAndrew]

Like & Sub!!! I'm a big fan of this UX trick for forms with placeholder text. Who learned a trick in the video?

[@vellioth]

for anyone who cant type in their input because of element overlapping, you can try adding pointer-events: none; on your .form-label

[@19Themaster97]

You Sir, i thank you for this!

[@yuqiyang2023]

OMG U ARE SUCH A LIFE SAVER! thank u!

[@maresstefan3391]

Duude! AWESOMENESS!! Thanks!

[@bonguthandokhumalo7552]

You've just made this sooo easy, much-appreciated man... Keep up the good work!

[@kaorimillar4284]

I just learned so much in this small video and your explanation is very clear. Thank you so much!

[@mikebordonaro3918]

Thanks Andrew! I learned a lot! Greatly appreciate the work you put into this. SUBSCRIBED!!

[@Arhmt9Playlist]

Thanks! I really appreciate this. Exactly what I was looking for.

[@amirmohamadbashiri]

Very detailed explanations, Thank you

[@daryladhityahenry]

Great & Clear tutorial. Thanks a lot.

[@hudakhalil3040]

Awesome, Simple and very interesting way to explain. Thank you

[@bo_ver4628]

Oh, man! That’s what I was looking for. I’ve done it with javascript, thought it is impossible to make it without :required attribute, since I don’t have required fields it doesn’t suite my case. I’m starting to pay respect for people who good at CSS3, thank you.

[@arjunkanojia3174]

Thanks You explained everything so well

[@rickfearn3663]

Excellent learning experience! Thanks Andrew!

[@FollowAndrew]

Glad it was helpful!

[@danielabou-assaly1330]

Thank you! That was really helpful

[@Locklesh]

Great video. Thank you!

[@AG-qp7gn]

Man, you are a genius. Thanks!

[@mgm_smile]

That's awesome!!! thanks !)

[@caseng1270]

Cool, thank you very much!

[@anabudimir7923]

Great tutorial :)

[@md.jayeenbinalam2003]

You are the boss. Thank you for this video.

[@hichamamroussi9087]

Thank you!

[@lordt4285]

Thanks dude I was losing my mind trying to get the label to stay after clicking off the form. I had no idea about the :not() pseudo-class.

[@bidyasagarmohapatra4014]

Thank you so much sir your great explanation🙏🏻 love from India ❤

[@elrafineitorxd5400]

Wow, i don't know about the :not pseudo class, amazing!

[@kvncnls]

Awesome video man! Subbed! One thing I'd like to request is if you can make your webcam smaller so we can get a better view of your code/UI. Thank you!

[@mohammedlamine8545]

You got My like & My subscription.

[@brandonwie4173]

Big applause in 2021 :) subbed as well. Thanks, Andrew.

[@tshepo2japhta28]

Thanks man

[@williamrowe7648]

Great job on the presentation. It was very easy to follow. It's a much cleaner approach than the one I was using from materialize css.

[@FollowAndrew]

Glad it was helpful!

[@wolfisraging]

one of the best channel for web dev

[@FollowAndrew]

Thanks!

[@three-zeros]

Holy Goof, sir. Thank you!

[@gopireddy5131]

Thanks for this "clear & concise" video. Any pointers on animating the label into the "fieldset" legend? Wondering if the field container div could be a fieldset.

[@juliancastro572]

nice

[@andreivs2257]

Nice use of the adjacent sibling selector.

[@FollowAndrew]

Fancy trick right?!

[@andreivs2257]

@@FollowAndrew Yes, thanks for the inspiration!

[@TheRevan5576]

The only thing that I would like to add to your great video is; in your .form-label class add the "pointer-events: none;" attribute, it will save you a lot of headaches later if your users on another browser cant select the field without highlighting the label. don't ask how I know this.

[@kinstar]

omg thanks ive been chasing my tail trying to sort this out -_-

[@suyogyaluitel8974]

You saved my life man

[@biancagiles5966]

This is great! I have just started learning CSS and this was really helpful! Are you able to explain how I can make the .container responsive? i.e. width:65vh on desktop and width:100vh; on any screen less than 768px wide? Thanks!

[@FollowAndrew]

That would require 'css media queries'

[@HareshPrajapati-hk4or]

Really cool👍, but how can I apply this same CSS animation on a select tag. Here you have used text and email type inputs. But I want to use a select tag then how can I apply this same CSS animation.

[@ellsonmendesYT]

Future is gr8t label:has(+input){ border:1px solid red; } select preceding sibling

[@ObiwanKennedy666]

Would be nice to be able to download the demo source

[@lilifuentes4536]

So everything works for me except the transforming of the label to above the input. I'm using React and JSX, I think it has something to do with that? Can anyone confirm difficulties with using this method in JSX (because of adjacent)? Is there an additional step to grab an adjacent element in JSX?

[@LucasLorenson]

Great explanation! Is it possible to do this same effect on a "select" tag? Do you have a video explaining it? I would like to replicate this floating effect in a select box here to follow the form pattern...

[@FollowAndrew]

Hmm, this technique wouldn't work as select menus don't have 'placeholders'. Never really thought of that, but I'm fairly confident it's possible. I'll have to investigate a bit there. With JS for sure, not sure about pure CSS

[@LucasLorenson]

@@FollowAndrew If you find a way to do it, please make a video! hehe

[@dariogeorge8680]

Does it works with IE?

[@forhadrh]

Cool! ^_^

[@khaledalsamman53]

this is one awesome trick!! however it got me a small bug which is the field and labels are intersect with my header when I scroll down T_T

[@unbxed8940]

Hi nice video about animated floating inputs, but I have a small issue everything works fine but when I try to select the box on top of the label text it doesn't do nothing and when I move away from the label block so above or under the label block it works again! Please some help to solve this issue Thx :)

[@yishuvohra3778]

hello use pointer-events:none; in form-label class and everything will work fine

[@basharkhoury9403]

when I press to type in the input filed it select the label is there a quick fix for this ?

[@yishuvohra3778]

In .form-label use pointer-events:none;

[@reevesstark6664]

can you help me, everything works fine but i cant type something on my form because the div form-label is on the top of the field :(

[@aBradAbroad]

Position the form-control and form-label as relative, set the form label to z-index 1 and set the control to z-index 2 with transparent background

[@yishuvohra3778]

Put pointer-events:none; in form-label class and everything will work fine

[@Arhmt9Playlist]

I just tested this in Internet Explorer and the placeholder text is not transparent. Should I be using JQuery instead of CSS, if I want this to work on all browsers? Thanks Andrew!

[@FR_-ij4zz]

Internet Explorer :D Omg..

[@OscarLeuro]

Dont work on Chrome and Edge. Help pls

[@DeyvisonSoutodeAlmeidaPina]

Just to add up, I suggest to put this on the css too for the chrome autofill: .form-control:focus + .form-label, .form-control:not(:placeholder-shown) + .form-label, .form-control:-webkit-autofill + .form-label { transform: translateY(-2.5em) scale(0.8); }