Hey I know you might not see this, as this video is a bit old, but I stumbled on this and I am so grateful that you do this. I encourage you to continue. Blessings.!!
I have to admit, this is the best coding channel on TH-cam. The truth is, I just subscribed. Keep up the good work. Looking forward to learning more from you.
I dont mean to be so off topic but does anyone know of a method to log back into an Instagram account? I somehow forgot my login password. I would appreciate any assistance you can give me
Amazing tutorial! Covers everything you need to know about styling text input fields. It is easy to take the concepts you presented here and expand upon them in custom ways for my own needs. Thank you sir. Liked and subscribed.
Absolutely possible. I have done something similar in RN . Dont have a video on RN in this channel. It pretty much comes down to animation and transforming
yeah sure. dropdown: th-cam.com/video/f_E5d9Gt5nM/w-d-xo.html selector: th-cam.com/video/-0VuZEYIYuI/w-d-xo.html date picker: th-cam.com/video/g1Zd0Y7OJuI/w-d-xo.html check the channel for more
Amazin tutorial. Extremely helpful. Just one question, why are you using transform: translateY(-50%) on the .custom-field .placeholder if you already positioned it on the Y-axis by top: calc(50% + 10px)? Isn't enough just the top positioning with the proper values?
thanks :). The top will put the top of the placeholder at the center but we want the vertical center of the placeholder at the center so we shift it up 50%.
Thanks for the explicit demonstration @ I used span tag to position my custom placeholder absolutely to the input border top according to your tutorial, however, when I clicked email input field and wanted to select one of my email accounts, I realized as I hovered on one of my emails, it automatically suggested my number and address(and filled their respective fields in which the customer placeholder overlapped the suggestion while I have not actually selected the email ). In this case, I couldn't see the suggestion clearly because of the overlapping, how do I go about it?
Hi. What do you mean by “implement it on select types”? What are trying to do? I have a video on styling select tags th-cam.com/video/-0VuZEYIYuI/w-d-xo.html And dropdowns th-cam.com/video/f_E5d9Gt5nM/w-d-xo.html
This is a wonderful video - I learned a lot by watching it and unpacking it. One thing I do not understand though is if you wrap the input field inside of a div, the placeholder text gets pushed down several pixels and when you focus on the field, the downsized text no longer is pushed up all the way out of the field. I can fix this by changing the two margin-top settings, but I'm wondering why I have to do this. Does a div come with some sort of default padding or margin? I tried setting those values to zero, but the issue still occurred. I just want to make sure that I'm addressing this issue the correct way. Thank you, sir - and I have Liked and Subscribed to your Channel.
Thank you and welcome to BFS. In order to help you ill need more details of your code. Div is a plain element with no styling so i need to see your code.
@@BeforeSemicolon That's what I thought about div too. I took the code that you posted on Codepen as a base - I created a default HTML file (Shift! on VSCode), added the HTML code from your Codepen and the CSS code inside a tag and tried that - worked great. I then enclosed custom field two in a div and got the problem.
Enter URL
This happens with all four label options - I tested it on both Chrome and Firefox, same thing. I also then tried directly modifying the codepen - wrapped option two in a div - and got the same erroneous result (and this was on Edge) - hopefully you should be able to see that too. I can post my entire file here if you want but it's about 250 lines, total. Thank you VERY MUCH for responding so quickly.
@@BeforeSemicolon I did that - and it now works. But I've run into another problem. If I add a (for="field") clause to the label (so it reads in Codepen "", then clicking on the placeholder text does nothing, it does not bring the field into focus. Clicking outside the placeholder text allows focus, but not when you click on the placeholder text itself. And I need the for clause, of course, so that I can capture/validate the input (at least that's the only way I know how to do it). Thanks again.
You dont need “for” when putting input inside a label tag. developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attr-for Validation is on the input so play with that: developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation
@@BeforeSemicolon may bad. What I meant was how to convert the css to work with . I tried making a copy of the css and replaced the input to select. Somehow it worked. 🤣 The only thing I cant figure out is the dropdown arrow for the select is now missing.
Hi! Great tutorial! I have one concern though, which is what if I entered an invalid input into an input field? For instance, the required format for a phone number are number inputs, so when entering letters, the placeholder still comes down. Adding invalid makes the placeholder permanently on top of the field input. How do I fix this? helppppp
Try to use the :invalid pseudo-class for the style that moves the label up. .custom-field input:invalid + .placeholder {…} Check this article where I provide example with error state medium.com/codex/how-to-style-an-input-field-with-css-only-tips-and-techniques-e6a00e9dcc50
@@BeforeSemicolon something e-commerce related would be great. I want to get a comfortable coding variety of different landing pages. Thanks in advance.
.custom-field.one input:not(:valid) { border: 2px solid red; } I recommend using Javascript for this because this will make the fields initially red. Maybe add a class like “.untouched” and on focus u remove the “.untouched” class then ur css would be: .custom-field.one input:not(:valid):not(.untouched) { border: 2px solid red; }
@@BeforeSemicolon yes, i added javascript and changed the input:value to input.dirty in css But The script doesn't seem work at all all input losses focus with text in them I Don't know what I'm doing wrong
Oh okay…you can actually learn a different technique by reading this article i wrote link.medium.com/ZqJnRu2zbhb. It uses placeholder instead of required.
Which of these 4 examples you like the most?
Any other style you go for in your personal projects?
Hey
I know you might not see this, as this video is a bit old, but I stumbled on this and I am so grateful that you do this. I encourage you to continue. Blessings.!!
Thank you Anadoo. I apreciate the gesture of taking time to provide feedback so I always take time to acknowledge the comment. Lets stay connected :)
I have to admit, this is the best coding channel on TH-cam. The truth is, I just subscribed.
Keep up the good work. Looking forward to learning more from you.
Thank you and welcome to BFS 😊 stay tuned
After you showed how to make the placeholder vanish, oh, I think I spent 10 minutes just looking at my placeholder vanish and reappear, it's so smooth
Haha i feel you…the tiny details
This is incredible, and CSS only on top. I've tried to recreate all of these and struggled in the past.
I think it's a fucking crime that you don't have waaaaay more subscribers! Thanks a lot for this and for everything that you do :).
I agree :) thank yo so much for this comment
@@BeforeSemicolon same feeling here!
I dont mean to be so off topic but does anyone know of a method to log back into an Instagram account?
I somehow forgot my login password. I would appreciate any assistance you can give me
@Nikolai Sawyer Instablaster ;)
Amazing tutorial! Covers everything you need to know about styling text input fields. It is easy to take the concepts you presented here and expand upon them in custom ways for my own needs. Thank you sir. Liked and subscribed.
Thank you and I appreciate the feedback. Welcome to Before Semicolon :)
Izi videwo ziratanga amakuru cyane kandi ndabakunda! Nyamuneka kora amashusho menshi nkaya!
Thanks. Sure thing will do
I would've called by self an intermediate CSS dev, but now after watching this, imma call myself a beginner.
Haha we are all beginners 😊
I know this voice!!!! How I’m I just finding about this channel now? So proud of you E… 🎉🎉🎉
Hehe thanks … its my little secret (i guess). Thank you 😊
Still a great tutorial a year and a half later, thanks a lot!
Thank you. Glad its not getting old 😊
Loved it. Can we do this in react native input? Is there any way to make a separate module of this styling you showed and use in React native? Thanks
Absolutely possible. I have done something similar in RN . Dont have a video on RN in this channel. It pretty much comes down to animation and transforming
Great content, super presentation😊👏👏👏👏. You diserve more subscribers. Keep up the good work dude.
Thank you. Will do :)
is there any tutorial like this input style, but for select dropdown element and datepicker?
yeah sure.
dropdown: th-cam.com/video/f_E5d9Gt5nM/w-d-xo.html
selector: th-cam.com/video/-0VuZEYIYuI/w-d-xo.html
date picker: th-cam.com/video/g1Zd0Y7OJuI/w-d-xo.html
check the channel for more
Amazin tutorial. Extremely helpful. Just one question, why are you using transform: translateY(-50%) on the .custom-field .placeholder if you already positioned it on the Y-axis by top: calc(50% + 10px)? Isn't enough just the top positioning with the proper values?
thanks :). The top will put the top of the placeholder at the center but we want the vertical center of the placeholder at the center so we shift it up 50%.
how do you get rid of the grey things on the outside of an input tag right when you make them?
You need to be more specific. Whats the time in the video?
@@BeforeSemicolon here's a link showing the grey things: th-cam.com/video/QaAAAR3qG40/w-d-xo.html
Those are borders. You set “appearance” and “border” to “none”
@@BeforeSemicolon thank you so much you deserve a sub
Thank you. Appreciated. Welcome to BFS 😊
Excellent mate love this please keep doing these videos
Thank you…love your photo by the way
Haha man of culture i see
Thanks for the explicit demonstration @
I used span tag to position my custom placeholder absolutely to the input border top according to your tutorial, however, when I clicked email input field and wanted to select one of my email accounts, I realized as I hovered on one of my emails, it automatically suggested my number and address(and filled their respective fields in which the customer placeholder overlapped the suggestion while I have not actually selected the email ). In this case, I couldn't see the suggestion clearly because of the overlapping, how do I go about it?
That is handled by the browser so to disable that add
autocomplete="off"
To the input field and any form you place the field inside of.
Really great work! Keep up the good content mate!
Thank you. Will do
Hi! Thank you for this, how about select types? :D
I'm having hard time to implement it on select types. thanks!
Hi. What do you mean by “implement it on select types”? What are trying to do?
I have a video on styling select tags
th-cam.com/video/-0VuZEYIYuI/w-d-xo.html
And dropdowns
th-cam.com/video/f_E5d9Gt5nM/w-d-xo.html
How can I put gradient background on the input field?
You can use the same technique i used for buttons on this video th-cam.com/video/adUCbVi4G-s/w-d-xo.html
@@BeforeSemicolon thx man, it help a lot!
Obrigado. Salvou minha vida! = Thanks. Saved my life!
De nada...content por ter ajudado
Great job and explanation!!!
Thanks Mahdi. Appreciated:)
I love it. Soo intense and useful.
Thank and welcome to the channel :)
This is a wonderful video - I learned a lot by watching it and unpacking it. One thing I do not understand though is if you wrap the input field inside of a div, the placeholder text gets pushed down several pixels and when you focus on the field, the downsized text no longer is pushed up all the way out of the field. I can fix this by changing the two margin-top settings, but I'm wondering why I have to do this. Does a div come with some sort of default padding or margin? I tried setting those values to zero, but the issue still occurred. I just want to make sure that I'm addressing this issue the correct way. Thank you, sir - and I have Liked and Subscribed to your Channel.
Thank you and welcome to BFS. In order to help you ill need more details of your code. Div is a plain element with no styling so i need to see your code.
@@BeforeSemicolon That's what I thought about div too. I took the code that you posted on Codepen as a base - I created a default HTML file (Shift! on VSCode), added the HTML code from your Codepen and the CSS code inside a tag and tried that - worked great. I then enclosed custom field two in a div and got the problem.
Enter URL
This happens with all four label options - I tested it on both Chrome and Firefox, same thing.
I also then tried directly modifying the codepen - wrapped option two in a div - and got the same erroneous result (and this was on Edge) - hopefully you should be able to see that too.
I can post my entire file here if you want but it's about 250 lines, total. Thank you VERY MUCH for responding so quickly.
add “display: inline-block” to .custom-field
@@BeforeSemicolon I did that - and it now works. But I've run into another problem. If I add a (for="field") clause to the label (so it reads in Codepen "", then clicking on the placeholder text does nothing, it does not bring the field into focus. Clicking outside the placeholder text allows focus, but not when you click on the placeholder text itself. And I need the for clause, of course, so that I can capture/validate the input (at least that's the only way I know how to do it). Thanks again.
You dont need “for” when putting input inside a label tag. developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attr-for
Validation is on the input so play with that: developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation
Awesome. Can you help me how to use/convert the css for select?
I dont quiet understand your request. More details please?
@@BeforeSemicolon may bad. What I meant was how to convert the css to work with . I tried making a copy of the css and replaced the input to select. Somehow it worked. 🤣 The only thing I cant figure out is the dropdown arrow for the select is now missing.
I have a video on that.
It is called:
CSS Select Tag Styling - how to style select tag with CSS
@@BeforeSemicolon nice. Thanks! 👍
Let me know if that helps
Hi! Great tutorial! I have one concern though, which is what if I entered an invalid input into an input field? For instance, the required format for a phone number are number inputs, so when entering letters, the placeholder still comes down. Adding invalid makes the placeholder permanently on top of the field input. How do I fix this? helppppp
Try to use the :invalid pseudo-class for the style that moves the label up.
.custom-field input:invalid + .placeholder {…}
Check this article where I provide example with error state medium.com/codex/how-to-style-an-input-field-with-css-only-tips-and-techniques-e6a00e9dcc50
Can you do a few landing pages (mobile-first approach), please?
For sure...anything specific you are interested on or anything will do?
@@BeforeSemicolon something e-commerce related would be great. I want to get a comfortable coding variety of different landing pages. Thanks in advance.
thank you very helpful, i like people give code in description
Thanks. Yeah that always happen on this channel 😉
amazing video. But if the field is empty than how to make placeholder and border color red
.custom-field.one input:not(:valid) {
border: 2px solid red;
}
I recommend using Javascript for this because this will make the fields initially red.
Maybe add a class like “.untouched” and on focus u remove the “.untouched” class then ur css would be:
.custom-field.one input:not(:valid):not(.untouched) {
border: 2px solid red;
}
@@BeforeSemicolon thank you. You solve my problem 👍
Anytime
Amazing work man
Thanks Afridi. Welcome to BFS
can anyone tell me how to use this code cuz i never copy pasted one. :)
There is a link in the description. Feel free to copy the code and use it your project
@@BeforeSemicolon hey i did but it didn't work.... any soln?
@@BeforeSemicolon and its not working for more than one textbox.
Share how you are using it
Great video!
Thank you
Thank you for the second one
Anytime bro.
Awesome video man, when i Change the type to email, the labels drop down when i enter an input instead of remaining up
If you change the type you must fall to using the .dirty class instead of the :valid state. Check the source code.
@@BeforeSemicolon yes, i added javascript and changed the input:value to input.dirty in css
But The script doesn't seem work at all
all input losses focus with text in them
I Don't know what I'm doing wrong
I updated the source code with .dirty option as well and included many input field type as example as well. Check it out for reference.
Oh thanks a lot u got a new subscriber
Welcome to BFS
Very Useful Video man! You Are awesome.. Keep going.. 😃
Thank you for the feedback. Much appreciated
@@BeforeSemicolon Where are you from Brother ?
Im from USA.
nice job 💚 u ar great
Thank you 😊…Welcome to BFS
If I write something in that input field and lost the focus then border animation is not working
More details please
@@BeforeSemicolon means in blur state , their is no animation when textfield has some value
Correct. This remains in that state when field gets value. If you dont want that simply remove the selector that targets fields with value
Amazing video! i
Glad you think so!
@@BeforeSemicolon 😊
Amazing. Subscribed.
Welcome to BFS :)
I completly lost when you done the background linear-gradient then added left bottom/100% outside the (). Cant understand that
Thats CSS background shorthand.
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
www.w3schools.com/cssref/css3_pr_background.asp
This is amazing
Thank you
You got one new subs :D
Thank you and Welcome to BFS :).
Thanks Bro🤝
Anytime:)
Thankyou ❤️❤️❤️
You’re welcome😊
amazing thanks
Anytime
Thank you very much
Anytime Muhammad.
Subscribing with all my accounts! Great content… go E! 🚀
Thanks for the support. Welcome to BFS
No explanation of how to style a form. Just a video of how you style your form.
Thats on the top of the list. Will be my next video
Отлично! Спасибо огромное. Теперь понятно.
glad to have helped :)
helpful
Thanks
this technique does not work in textarea
The video is for text-based input but the same strategy still works for textarea. Have you find anything that did not?
@@BeforeSemicolon I solved the problem. It was enough to write ( required="" ) in the textarea.
Oh okay…you can actually learn a different technique by reading this article i wrote link.medium.com/ZqJnRu2zbhb. It uses placeholder instead of required.
@@BeforeSemicolon thank you for help
Anytime
It is for professionals, not for beginners. For me everything to fast and not clear to many everything
Sorry about that. Anything I can do to help you in thay regard?
@@BeforeSemicolon thank you so much, but nothing. It is my problem. I still need learn lot of things 😁
Then in that case reach out anytime through any of the social media platforms linked in the description of this video. Ill be glad to help.