These are beautiful floating labels! I wish they used label instead of span for accessibility. I'm having trouble converting the code to work with label instead of span.
Beautiful effect. But would it be possible to get the same without the obligation of required? To use it in a form where it is not mandatory to fill in all fields. Thank you. I always follow you with great interest. (sorry for the translation made with Google Translate)
I use placeholder=" " attribute (with one space) on input, and then in css: input:not(:placeholder-shown) ~ span { /* your code */ }. Works in all modern browsers
@@danissima9681 Excellent solution. To make it slightly clearer for everyone who is not sure how to implement the suggestion, replace all "input:valid" text with "input:not(:placeholder-shown)" in the original CSS, then replace all "required" or "required='required'" text in your HTML with "placeholder=' '". Obviously if you DO need the field to be "required", you can leave that keyword there with no ill-effects.
@@bled72 well bro u need to try react then..react forms are pain in the ass..it's there default behaviour that they always consider input values to be valid that's why it's not working...
![PASULOL รามเกียรติ์ ตอนที่ 4 นนทกพบรัก [Ramakien Ep.4: Nonthok in love]](http://i.ytimg.com/vi/tMUQgmZzf_A/mqdefault.jpg)
Muje apki sare projects, Animation ect . sab bhot pasand hai
hiding that border line by changing the background color of the span !! damn good
Thank you so much , I was just finding this type of design seens some months and now you uploaded this 😌
this video is great for people wanting to make their own material design framework, or people who want to try anything with material design at all!
deserves a million subs
That was easier than I expected!
So good tutorial
Thank you so much. I wanted recomend my channel. I'm hope get advices for myself. Love u bro
Very much useful. Tahnk you! Keep posting !!!!!!!!!
the simplicity of it is amazing bro
Please tellme What is the use of ' .InputBox input:valid ~span' ??
Wow...amazing 🙉🙉🙉 , Thank you so much for share!
You r god of css
bro....you are freaking amazing!!!!!
Thank you very much . works for me
Great stuff as always! btw instead of separating the translate X and Y, you can just use `translate(_X_,_Y_)`
Please tellme What is the use of ' .InputBox input:valid ~span' ??
@@gopal1291 ~ is a sibling selector. It selects any that is a sibling of any with the class ".inputbox" that has a valid content for its type. hih.
Or you can simply use the translate property like: "translate: 10px -7px;"
@@kenjiutaka True. Though be aware that the non-`transform:` versions of translate/rotate are relatively new.
Very simple 😍😍😍
You are the man!
Amazing !! I like Your Work ♥️
What about textarea and select ?
Please make video for both as same.
super super super, thanks
OK, so now I know this code AND am insanely chilled due to the music and the 'click' sounds...you're like the Wim Hof of web development...😅
Nice
where is our video about Facial recognition Effect
Artist!
I enjoy watching all your video and thanks for the good animation/design
You are amazing dude!
How can do transitions dont run when page reload?
These are beautiful floating labels! I wish they used label instead of span for accessibility. I'm having trouble converting the code to work with label instead of span.
Label inline-block is probably the issue you're having try change that.
Nice example, but it doesn't work in the general, for example over gradient backgrounds.
Great stuff, tho it's now doable with attr css property, without additional span
Nice video!! Do everything and if it worked for me. Thanks and greetings from Venezuela.
Saw another video do the exact same thing
creative
can we do this using a placeholder inside the text box
Nice video
We can get same style from material ui
you are awesome man
Amazing °° Thank you so much for sharing...^^
Thanks!
That's good component. Can you make it for dropdown or textarea?
Same question here!
Thanks
Very cool bhiya kay tum free join nahi kar sakte ko kya. jin logo ke pass paise nahi hai ve kaise join kare ge apka channal
Hi, can you please show which Extension you use so that your CSS code looks like this?
Great job, I watch all your videos.
"prettier" i think
please make a video on preloader
Can't you do it using pseudo elements and relative transformation too? Then it would be a lot easier to handle that stuff.
Согласен. Но видимо автор пошёл по трудному пути.
Please tellme What is the use of ' .InputBox input:valid ~span' ??
gap: 30px dos't worke proparly. How to fix it??
This is art!
default custom inputs from bt5 or materialise
Nice project! Can you do the same thing, but in a contact/login form?
No, sorry, its too hard =(
what for thema?
I want to use it in Python for App Desktop
Hi, how about select type? :) thanks!
niceee
thanks my brother!!
Thank for video
Wow man!
Please Don't mind...
GREAT!
Nice ❤️
How would it be done with Tailwind? .
My component full of classes?
Thank you brother
thank you so much!))
Thanks brother ❤️
Thank you! where is the plugin name for show colors in sublime text?
This amazing
Obrigado sr te amo ai viu tmj!
adoro esse canal s2s2s🔰
How do u auto update and instantly load the typed code effects in the browser?
I'm new and I keep manually loading after typing.
Go to the settings on vs code
And change "Auto Save"
To "AfterDelay"
Is it possible for me to have two "input text" and when I write in the first one the same thing appears in the second one?
How is this done?
Thanks a lot bro
My brother's name is also Mohammad irshad 🙃
the transform doesnt work on mine plss helpppp
তুমি কোথায় থাকো?
this required field not working with input type email..how to fix it?
Valid attribute not working in netbeans.
This span tag show over the user input value
I am the 1st viewer
Excelente, muchas gracias!!!
hey bro gap is not working
I want. To buy css animation course
You could have explained what you are doing instead of the music
Великолепно
Does not work if you type a invalid email
I am trying to make the field to not be required, but it changes to when it is clicked, please help
where are you from?
Beautiful effect. But would it be possible to get the same without the obligation of required? To use it in a form where it is not mandatory to fill in all fields. Thank you. I always follow you with great interest. (sorry for the translation made with Google Translate)
I use placeholder=" " attribute (with one space) on input, and then in css: input:not(:placeholder-shown) ~ span { /* your code */ }. Works in all modern browsers
@@danissima9681 SUPER. grazie mille!!!
Please tellme What is the use of ' .InputBox input:valid ~span' and (~span) ??
@@gopal1291 When there is valid input in the field or that field currently has focus, then apply this CSS to the "span" element.
@@danissima9681 Excellent solution.
To make it slightly clearer for everyone who is not sure how to implement the suggestion, replace all "input:valid" text with "input:not(:placeholder-shown)" in the original CSS, then replace all "required" or "required='required'" text in your HTML with "placeholder=' '". Obviously if you DO need the field to be "required", you can leave that keyword there with no ill-effects.
Only css?!?😱😱😱
can you help with the same design on React? I don't think :valid selector works there
have
have you tried ? it's just css. it's not related to any JS framework
@@bled72 well bro u need to try react then..react forms are pain in the ass..it's there default behaviour that they always consider input values to be valid that's why it's not working...
u can try fieldset width legend tags
@@ОлегБорисов-г9ч well yeah I can, but I wanted to work with animations
Why ? Why not using ?
Try your idea out and experiment ☺️
Brother because labrl or block level element and span is inline elements
You can use label but you need to convert label block level to inline
😍
because is @Deprecated in API 23
Lol (jk)
@@abuzain859 label is an inline tag brother .
@@kani2499 ops my mistake 😂
If you want to learn animation plz visit my channel
Give me the code
a lot of property i can't remember all :(
orang indo bang?
" MUHAMMAD IRSHAD AP NA WORD MUHAMMAD LIKH KR USY REMOVE KIYA HA YA IMAN KA KHILAF HA AEINDA AP AESA HAR GIZ NA KRY "
man where is the code
👋
Malayali ano
Bol nehi saktihe kya?
Excelente, muchas gracias!!