Input Animations with HTML and CSS | Input Label Animation 

I’m terrified of css. Instead of watching horror movies I watch videos like this where it takes 80 lines of css to implement “simple” input field animation. Props to the instructor 👏🏻.

So I added this design to my project and it looks amazing!! I also added form invalidation events, the borders now display in red when the user has an invalid input. It’s so clean, compact and responsive!

This is design looks so clean! When adding invalidation to this it will look so responsive.

Best solution from all "float label" videos on RU-vid. Thank you.😊

The other Day I was filling a form with exactly this kind of animation. And now you provide a way to achieve this. That's Great. 👏👏👏

Thank you so much. Perfectly explained, mind-blowing and sure concise. I am so glad to came across with your video. I will be sure about subscribing your channel.

Absolutely an amazing video! Super helpful! Thank you so much for making this!

Congrat on passing the 10000 subscribers mark, I definitely need to learn Sass.

THat was really helpful, One thing I spotted is ---> don't you think form__input:not(:focus) is a redundant check, I think just using .form__input:not(:placeholder-shown) would do!!

Thanks a lot, it's extremely helpful , I didn't knew that we could achieve such kind of animation by just using CSS . Without using any Javascript You showed how to achieve it.

I was looking for these kind of input style for past 2-3 months and i was tired of jquery solutions. This has really helped me a lot. thanks a ton

Hey! So I have done this, but the :not(:focus) & :not(:placeholder-shown) part seem not to work. I even typed the code exactly like you wrote it.

Thank you for this tutorial. It was really helpful

very good stuff Angela! Thanks for the great explanation!

That way I find it easier than using "placeholder" === CSS === label { position: absolute; font-size: 0.8rem; left: 10px; top: 0%; color: #bababa; transform: translateY(50%); transition: all 0.15s ease; pointer-events: none; } input:focus ~ label, input:not([value=""]) ~ label { top: -50%; }

Perfect! I was just working on this idea. Thank you!

Thank u for being a great human being and taking ti to help all of us noobs out cheers

This is fuk*ng awesome) I was looking for such a solution for my input but your variant is even better than I wanted it to be)

Hi Angela This is an amazing tutorial, thank you very much for your work. You got yourself a new subscriber :D I think I can optimise one CSS selector: .form__input:not(:placeholder-shown):not(:focus) ~ .form__label This way you drop the .form__input class duplication and I think it still works as expected :)

why not just use the form element at 0:40?

Awesome... this was clear and right to the point. great demo

You can use background transparent instead of background none. Very helpful video❤

What a detailed and clear explanation! I loved it

Thank You. Helped me greatly in one of my Projects

thank you i learned exactly what i want

You're awesome Angela, thanks a lot for this nice tut 🙌🏽☺️☮️🎊

Wow. The solve for my problem is here in this video. Thanks! I hope you got 1million suscribers

That's cool! Thank you for the video) Only now it turned out, everything was clearly explained. I understand you, even if I don't know much English))

Is there a reason you used a div.form instead of form.form and an input type of text vs input type email ?

Simply , I love it! thanks a lot!!

you helped me a lot, thanks for tutorial

Thanks a lot, I was finding exactly that kind of input animation.. 💝

Great explanation!

She explains very nicely... keep on dear.. add more and more videos

Hey dear, just a doubt pushed into me instead of .form__input:not(:placeholder-shown).form__input:not(:focus) ~ .form__label can we use .form__input:valid for this please solve this as it is tricking me.

so easy. thank you sooo much. i would've installed a framework just for this.

Thanks, i have always wanted to know this. at last i have, thanks to you

Woah mam, you are at another level u know elements and their uses

Thank you Angela

Ofcourse the :not pseudo class🤦🏾‍♂️, I wouldn't even have thought of it. I was just missing that part only, this really helped.

Thank you sir.... Very helpful video.

this is awesome

If this html compiler is free on internet then please give or provide the path to go through this compiler.

you are an awesome teacher :)

I want to use it in Python for App Desktop

Superb, thanks.

Helped me, Thanks!!

Amazing sis 💓😊👍

Great Work

Thank You So much, i was looking for a way to do this, then i saw the main ingredient :not(:placeholder-shown) ☺

That's awesome.

Thank you love your tutorial !!

Fantastic solution to one of the most common mistakes people make with forms. You use placeholders instead of labels because it simply looks better. The problem is that from a UX perspective, that is a mistake because the placeholder disappears when you click on the input. This way you can have both the looks and experience :)

Awesome tutorial

easy and excellent! thank you so much.

Great content, thank you!

Thanks for this amazing video.

Ótimo vídeo parabéns ✌.

Thanks a lot for sharing your expertise!!! I am rookie and I learn a lot from valuable contents like yours.

Fabulous Tutorial

Great content, thank you so much!

Thank you very much for this tutorial! I've learned a lot! Can I ask you a question? Is there a way to apply styles to a textfield blinking cursor? I'm on a project where I haver to emulate a linux términal, but I haven't been able to find information in order to style that kind of cursor! Would you mind giving me a hint on that? Thanks in advance!

how to control animations with loop

Great Video, but how can I fix that if I click on the Label itself that the input gets selected? Currently if I can only select the input field if I click everywhere else than the label. Thanks

Great work mam🤩

Bingo, I was asked to make exact input animation in my current work.

THANK YOOOOOOOU

Thanks Angela 👍

Hello.. thanks for this video. this helps.. and i have a doubt when we click on label its not working

Thanks 👍

It's not working on form or more input fields

how to handle label animation in dropdown selection box ??

Love u angela

Thank you!!

Great tuts really good

v nice tutuorial...

Hi! With just one input works but when you add more it fails overlapping the inputs.

Thank you

Why can't I define colors using '$' ?

not able to run in editor please anybody can help me

Love it 💕💕

How would you stack these inputs on top of each other, like in a real-life Sign Up form?

Beautifully done. All standard HTML/CSS and no fancy JavaScript. That's how the modern web should be!

Cool !

great video and great channel

pretty neat

thks for the video.

good job

please when you are making short tutorial like this USE only CSS cuz not everybody know SCSS

my form-label isn't retaining its original position when i focused out and nothing is typed :-( btw tysm i m continuously learning from you :-D

Dope

You are so beautiful person, thank you so much.

qandeeeeeeeeee

Awesome way to avoid JS by using :not👍