Animated Floating Input Labels Pure CSS

  Рет қаралды 26,525

FollowAndrew

FollowAndrew

4 жыл бұрын

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) 💖
kzfaq.info?s...
🙏 Become a Patron for support! 🙏
/ followandrew
📢 Social Media 📢
TWITTER (@followandrewedu) ➞ / followandrewedu
#floating #css #input #label

Пікірлер: 68
@FollowAndrew
@FollowAndrew 4 жыл бұрын
Like & Sub!!! I'm a big fan of this UX trick for forms with placeholder text. Who learned a trick in the video?
@vellioth
@vellioth 3 жыл бұрын
for anyone who cant type in their input because of element overlapping, you can try adding pointer-events: none; on your .form-label
@19Themaster97
@19Themaster97 3 жыл бұрын
You Sir, i thank you for this!
@yuqiyang2023
@yuqiyang2023 3 жыл бұрын
OMG U ARE SUCH A LIFE SAVER! thank u!
@maresstefan3391
@maresstefan3391 2 жыл бұрын
Duude! AWESOMENESS!! Thanks!
@bonguthandokhumalo7552
@bonguthandokhumalo7552 3 жыл бұрын
You've just made this sooo easy, much-appreciated man... Keep up the good work!
@kaorimillar4284
@kaorimillar4284 3 жыл бұрын
I just learned so much in this small video and your explanation is very clear. Thank you so much!
@daryladhityahenry
@daryladhityahenry 3 жыл бұрын
Great & Clear tutorial. Thanks a lot.
@amirmohamadbashiri
@amirmohamadbashiri 3 жыл бұрын
Very detailed explanations, Thank you
@Arhmt9Playlist
@Arhmt9Playlist 3 жыл бұрын
Thanks! I really appreciate this. Exactly what I was looking for.
@Locklesh
@Locklesh 3 ай бұрын
Great video. Thank you!
@mikebordonaro3918
@mikebordonaro3918 3 жыл бұрын
Thanks Andrew! I learned a lot! Greatly appreciate the work you put into this. SUBSCRIBED!!
@arjunkanojia3174
@arjunkanojia3174 3 жыл бұрын
Thanks You explained everything so well
@hudakhalil3040
@hudakhalil3040 3 жыл бұрын
Awesome, Simple and very interesting way to explain. Thank you
@rickfearn3663
@rickfearn3663 4 жыл бұрын
Excellent learning experience! Thanks Andrew!
@FollowAndrew
@FollowAndrew 4 жыл бұрын
Glad it was helpful!
@danielabou-assaly1330
@danielabou-assaly1330 2 жыл бұрын
Thank you! That was really helpful
@AG-qp7gn
@AG-qp7gn 3 жыл бұрын
Man, you are a genius. Thanks!
@hichamamroussi9087
@hichamamroussi9087 Жыл бұрын
Thank you!
@mgm_smile
@mgm_smile 3 жыл бұрын
That's awesome!!! thanks !)
@elrafineitorxd5400
@elrafineitorxd5400 Жыл бұрын
Wow, i don't know about the :not pseudo class, amazing!
@bo_ver4628
@bo_ver4628 3 жыл бұрын
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.
@caseng1270
@caseng1270 3 жыл бұрын
Cool, thank you very much!
@md.jayeenbinalam2003
@md.jayeenbinalam2003 3 жыл бұрын
You are the boss. Thank you for this video.
@anabudimir7923
@anabudimir7923 4 жыл бұрын
Great tutorial :)
@bidyasagarmohapatra4014
@bidyasagarmohapatra4014 3 жыл бұрын
Thank you so much sir your great explanation🙏🏻 love from India ❤
@williamrowe7648
@williamrowe7648 8 ай бұрын
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
@FollowAndrew 8 ай бұрын
Glad it was helpful!
@mohammedlamine8545
@mohammedlamine8545 3 жыл бұрын
You got My like & My subscription.
@wolfisraging
@wolfisraging 4 жыл бұрын
one of the best channel for web dev
@FollowAndrew
@FollowAndrew 4 жыл бұрын
Thanks!
@tshepo2japhta28
@tshepo2japhta28 3 жыл бұрын
Thanks man
@three-zeros
@three-zeros 3 жыл бұрын
Holy Goof, sir. Thank you!
@brandonwie4173
@brandonwie4173 3 жыл бұрын
Big applause in 2021 :) subbed as well. Thanks, Andrew.
@lordt4285
@lordt4285 3 жыл бұрын
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.
@kvncnls
@kvncnls 4 жыл бұрын
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!
@juliancastro572
@juliancastro572 2 жыл бұрын
nice
@andreivs2257
@andreivs2257 4 жыл бұрын
Nice use of the adjacent sibling selector.
@FollowAndrew
@FollowAndrew 4 жыл бұрын
Fancy trick right?!
@andreivs2257
@andreivs2257 4 жыл бұрын
@@FollowAndrew Yes, thanks for the inspiration!
@gopireddy5131
@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.
@TheRevan5576
@TheRevan5576 2 жыл бұрын
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
@kinstar 2 жыл бұрын
omg thanks ive been chasing my tail trying to sort this out -_-
@suyogyaluitel8974
@suyogyaluitel8974 Жыл бұрын
You saved my life man
@ellsonmendesYT
@ellsonmendesYT Ай бұрын
Future is gr8t label:has(+input){ border:1px solid red; } select preceding sibling
@ObiwanKennedy666
@ObiwanKennedy666 Жыл бұрын
Would be nice to be able to download the demo source
@HareshPrajapati-hk4or
@HareshPrajapati-hk4or 2 жыл бұрын
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.
@biancagiles5966
@biancagiles5966 4 жыл бұрын
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
@FollowAndrew 4 жыл бұрын
That would require 'css media queries'
@lilifuentes4536
@lilifuentes4536 3 жыл бұрын
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?
@dariogeorge8680
@dariogeorge8680 4 жыл бұрын
Does it works with IE?
@forhadrh
@forhadrh 3 жыл бұрын
Cool! ^_^
@LucasLorenson
@LucasLorenson 2 жыл бұрын
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
@FollowAndrew 2 жыл бұрын
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
@LucasLorenson 2 жыл бұрын
@@FollowAndrew If you find a way to do it, please make a video! hehe
@khaledalsamman53
@khaledalsamman53 3 жыл бұрын
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
@basharkhoury9403
@basharkhoury9403 3 жыл бұрын
when I press to type in the input filed it select the label is there a quick fix for this ?
@yishuvohra3778
@yishuvohra3778 2 жыл бұрын
In .form-label use pointer-events:none;
@unbxed8940
@unbxed8940 3 жыл бұрын
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
@yishuvohra3778 2 жыл бұрын
hello use pointer-events:none; in form-label class and everything will work fine
@reevesstark6664
@reevesstark6664 3 жыл бұрын
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
@aBradAbroad 3 жыл бұрын
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
@yishuvohra3778 2 жыл бұрын
Put pointer-events:none; in form-label class and everything will work fine
@Arhmt9Playlist
@Arhmt9Playlist 3 жыл бұрын
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
@FR_-ij4zz 2 жыл бұрын
Internet Explorer :D Omg..
@OscarLeuro
@OscarLeuro 3 жыл бұрын
Dont work on Chrome and Edge. Help pls
@DeyvisonSoutodeAlmeidaPina
@DeyvisonSoutodeAlmeidaPina 3 жыл бұрын
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); }
CSS Flexbox Tutorial - Learn the right way
35:41
FollowAndrew
Рет қаралды 4,2 М.
Design Contact Form HTML & CSS #withme
22:27
FollowAndrew
Рет қаралды 9 М.
Was ist im Eis versteckt? 🧊 Coole Winter-Gadgets von Amazon
00:37
SMOL German
Рет қаралды 29 МЛН
1❤️
00:17
Nonomen ノノメン
Рет қаралды 11 МЛН
Became invisible for one day!  #funny #wednesday #memes
00:25
Watch Me
Рет қаралды 30 МЛН
I bet you haven't heard of this cool HTML tag & trick!
8:51
FollowAndrew
Рет қаралды 6 М.
Custom Checkbox Pure CSS Tutorial
11:24
FollowAndrew
Рет қаралды 15 М.
Input Animations with HTML and CSS | Input Label Animation
11:47
Angela Design
Рет қаралды 101 М.
Use Arc Instead of Vec
15:21
Logan Smith
Рет қаралды 137 М.
Input Label Animation | HTML & CSS
12:36
Web Dev Made Easy
Рет қаралды 11 М.
HTML Tables Tutorial with CSS Styling - Crash Course
29:03
FollowAndrew
Рет қаралды 140 М.
10 modern layouts in 1 line of CSS
21:39
Chrome for Developers
Рет қаралды 1,1 МЛН
Input Animations With HTML And CSS
18:09
developedbyed
Рет қаралды 768 М.
Animated Responsive Navbar with CSS - Plus Other Useful Tricks
11:40
Was ist im Eis versteckt? 🧊 Coole Winter-Gadgets von Amazon
00:37
SMOL German
Рет қаралды 29 МЛН