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!
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.
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.
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!!
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 :)
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.
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 :)
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
If you duplicate the entire div with the class of "form" it will not overlap, but if you just duplicate the input and label elements it will. This is because the position property of the form is set to relative and the input is absolute.
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!
@@angeladesign737 ya i have done it ..but for try when i put like this placeholder = "." means content init it works fine now , But I m confused as of logic 🧐
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 👏🏻.
😂
ha i hear you!! I feel the same way
Best solution from all "float label" videos on UA-cam. Thank you.😊
This is design looks so clean! When adding invalidation to this it will look so responsive.
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!
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. 👏👏👏
Awesome! Thank you!
very good stuff Angela! Thanks for the great explanation!
Absolutely an amazing video! Super helpful! Thank you so much for making this!
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.
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
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.
Congrat on passing the 10000 subscribers mark, I definitely need to learn Sass.
Thank you! Sass is awesome, I use it all the time now
Thank u for being a great human being and taking ti to help all of us noobs out cheers
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!!
You are right, good call!
Helpful! I was wondering why we needed the not focus too! Thank you!
Thank you for this tutorial.
It was really helpful
Awesome... this was clear and right to the point. great demo
Woah mam, you are at another level u know elements and their uses
Thank you so much!
What a detailed and clear explanation! I loved it
Glad it was helpful! Thanks!
Perfect! I was just working on this idea. Thank you!
Glad it was helpful!
Thank You. Helped me greatly in one of my Projects
She explains very nicely... keep on dear.. add more and more videos
Wow. The solve for my problem is here in this video. Thanks! I hope you got 1million suscribers
Thank you so much! Happy it helped
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.
Hey, me too. You have already done? Can you help me?
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)
You can use background transparent instead of background none. Very helpful video❤
bro not able to run on editor
you helped me a lot, thanks for tutorial
thank you i learned exactly what i want
You're awesome Angela, thanks a lot for this nice tut 🙌🏽☺️☮️🎊
Simply , I love it! thanks a lot!!
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%;
}
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 :)
Thanks, i have always wanted to know this. at last i have, thanks to you
Thanks a lot, I was finding exactly that kind of input animation.. 💝
Thank you sir....
Very helpful video.
Thanks a lot for sharing your expertise!!! I am rookie and I learn a lot from valuable contents like yours.
Glad it was helpful!
Is there a reason you used a div.form instead of form.form and an input type of text vs input type email ?
Awesome tutorial
you are an awesome teacher :)
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))
Glad it helped!
Great explanation!
Fabulous Tutorial
Great work mam🤩
so easy. thank you sooo much. i would've installed a framework just for this.
Thank you Angela
Superb, thanks.
Great Work
Ofcourse the :not pseudo class🤦🏾♂️, I wouldn't even have thought of it. I was just missing that part only, this really helped.
this is awesome
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.
why not just use the form element at 0:40?
THANK YOOOOOOOU
Helped me, Thanks!!
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 :)
That's awesome.
Great content, thank you!
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
Amazing sis 💓😊👍
Thank you!
If this html compiler is free on internet then please give or provide the path to go through this compiler.
Thanks Angela 👍
Glad it was helpful!
how to handle label animation in dropdown selection box ??
Great content, thank you so much!
Hi! With just one input works but when you add more it fails overlapping the inputs.
If you duplicate the entire div with the class of "form" it will not overlap, but if you just duplicate the input and label elements it will. This is because the position property of the form is set to relative and the input is absolute.
Hello.. thanks for this video. this helps.. and i have a doubt when we click on label its not working
Thanks for this amazing video.
easy and excellent! thank you so much.
Great tuts really good
Glad you like them!
v nice tutuorial...
Ótimo vídeo parabéns ✌.
Love u angela
I want to use it in Python for App Desktop
Thanks 👍
How would you stack these inputs on top of each other, like in a real-life Sign Up form?
I have this tutorial that goes over how to create a complete sign up form: ua-cam.com/video/pfwEz3Zo4mA/v-deo.html
Thank you!!
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!
caret-color: currentColor; will set it to the same color as the text color on that element. Or of course you can set it to whatever colour you’d like
Thank You So much, i was looking for a way to do this, then i saw the main ingredient :not(:placeholder-shown) ☺
how to control animations with loop
Bingo, I was asked to make exact input animation in my current work.
great video and great channel
Thank you so much!
Thank you
pretty neat
Thanks!
good job
do you have a social network?
Love it 💕💕
Thank you!!
@@angeladesign737 💕
Cool !
Thanks!
It's not working on form or more input fields
Beautifully done. All standard HTML/CSS and no fancy JavaScript. That's how the modern web should be!
Thank you so much!
that code is not working in editor
not able to run in editor please anybody can help me
Dope
thks for the video.
Why can't I define colors using '$' ?
because it's scss syntax
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
Glad my videos have been helpful! Did you remember to add the placeholder=" " in the HTML?
@@angeladesign737 ya i have done it ..but for try when i put like this
placeholder = "." means content init it works fine now , But I m confused as of logic 🧐
Try adding a space inside the placeholder, like this: placeholder = " "
please when you are making short tutorial like this USE only CSS cuz not everybody know SCSS
You are so beautiful person, thank you so much.
qandeeeeeeeeee
Awesome way to avoid JS by using :not👍