How to Create Float Input Label using HTML and CSS

[@RG_aming]

this is the video everyone wants, no voiceover no 30minute intro ... just useful content

[@mr.mobinyt]

@@RG_aming Thank you for your comment, Yes, you are right, many people need these videos, and I tried to show this very quickly and usefully. I am glad that it was useful.

[@God_Of_Sigma2.0]

​@@mr.mobinytbro how do I merge this two HTML and CSS content 1. kzbin.info/www/bejne/h3TKaGCmi8ecmposi=aMJMSZH9m9utjboJ 2. kzbin.info/www/bejne/jnuwkqVtm6pjhq8si=_lZvVXKRRRjJIlqc

[@LandenLam]

I just became your 1000 subscribers. Congrats and nice video.

[@mr.mobinyt]

@@LandenLam thanks for your comment bro🔥❤️

[@CuriousFox_]

Wow! Your tutorials take our projects to a new level! Thank you very much and much success!

[@mr.mobinyt]

@@CuriousFox_ Thank you very much for your kindness

[@moecritic1493]

For those who are new or just didnt know, pointer-events:none; makes the text un-selectable

[@mr.mobinyt]

@@moecritic1493 Using the pointer-events feature in CSS, you can specify whether a tag responds to the mouse pointer event or not! For example, by default, when the mouse is placed on a link, the mouse pointer changes shape.

[@mr.mobinyt]

@@moecritic1493 Thanks for your comments 🙏

[@MaelkMark]

Or just use `user-select: none` to disable selection.

[@rshekhar11]

The main point is you can't do it functional without required attribute on the input. This is the main catch otherwise whats stopping bootstrap to implement it.

[@DesignThinkerer]

You don't need attributes to do this

[@PsalmJNFano]

If it is div and not form element. its not needed add the required attribute

[@rxdy22]

A great tutorial, bro!❤️

[@mr.mobinyt]

@@rxdy22 Thanks for your comment bro🔥🙏

[@OnlyADownstat]

gr8 vid... this effect always look great until you apply it to a textarea....

[@SaranKonala]

Nice

[@mr.mobinyt]

@@SaranKonala thanks🙏

[@omsharma9523]

I needed this for so long thanks for easy tutorial

[@mr.mobinyt]

@@omsharma9523 thanks you bro❤️

[@abdomohamad768]

just an advice, don't put the font-family rule in the '*' selector as it's also goes to unnecesary elements that don't use it

[@TechTasty-nx6zk]

Nice 👍👍👍

[@mr.mobinyt]

@@TechTasty-nx6zk thanks🙏

[@vinay_dias]

Can you please try explaining what you do and why you do ?

[@tolgaflashtr2855]

You should make it save each 0.5 sec. or something, in the beginning of the video, it is better for us to see what changes when you write X and Y, but you save it after writing some code, otherwise, thanks, 4.5 mins of video for one of the best features to add to a login form!

[@mr.mobinyt]

@@tolgaflashtr2855 Thank you for the comment, for sure, the number of people who have made this request has increased, auto save is active in the next videos

[@ronaldallanaljunrupuesto2714]

I'll subscribe looks like I'm gonna learn awesome things from you

[@mr.mobinyt]

@@ronaldallanaljunrupuesto2714 Thank you for your comment, I try to provide good content

[@mekalavasanthu]

good content very useful to beginners .subscribed done. keep it up bro.

[@mr.mobinyt]

@@mekalavasanthu Thanks for motivation comment man🙏

[@leo_6961]

awesome

[@mr.mobinyt]

@@leo_6961 thanks🔥🙏

[@ronaldallanaljunrupuesto2714]

Awesome

[@mr.mobinyt]

@@ronaldallanaljunrupuesto2714 thank you🔥

[@psociety371]

Cool

[@mr.mobinyt]

@@psociety371 Thank you bro🙏

[@diesaffer]

fantastic unfortunately i can't get the animation to work if the label html comes before the input, even if you give the input id to the label.

[@diesaffer]

AI fixed it: .input-field:focus-within label { top: 0; padding: 0 10px; background: #121212; }

[@Gulshansays_]

Preview??

[@dragcoder]

Great

[@mr.mobinyt]

@@dragcoder thanks man🙏

[@PRsHungama]

bhai input:focus ke baad ~ lagane se kya hota hai?

[@NeerajSSinghButola]

if you select or click on the input . It will select any element after ~ eg - input:focus ~ label here css will select label when u click on the input box

[@yashsoni8043]

bro when i click one somewhere then that text (enter your email) come again in the box after i write something on box whyyy also i copied the same code as your

[@abhirupghosh1401]

what is the spellcheck attr used for?

[@programmershray5260]

It is used for preventing any sort of wrong spellings in the text field. For ex: Name: John (not jaun)

[@mrnoname1005]

I can archive this using only HTML tag

[@Code_Cosmoss]

Hey! Which color scheme or theme are you using in vs code? Looks good. Im actually tired of the default theme

[@mr.mobinyt]

@@Code_Cosmoss Thank you for watching and your comment, the name of this theme is onedark pro

[@Code_Cosmoss]

@@mr.mobinyt thanks!

[@shuvosarkar8888]

source code ?

[@Real-M2-b]

❤

[@rongitmukherjee]

Good stuff

[@mr.mobinyt]

@@rongitmukherjee thanks🙏

[@aref003]

whats your vscode theme name?

[@mr.mobinyt]

@@aref003 onedark pro

[@shuvosarkar8888]

Pro tip: if you don't add required in input html tag then the label isn't transforming

[@mr.mobinyt]

@@shuvosarkar8888 If we do not add the value inside the tag, the label will return to the previous state

[@vpbal0chplaying]

Bro not use music add keyboard sound

[@WebDevXpert]

nice video bro @WebDevXpert

[@mr.mobinyt]

@@WebDevXpert thanks🔥

[@WebDevXpert]

@@mr.mobinyt welcome

[@shohelshake6664]

Where your code??

[@jacksonofficial001]

guys lets get him to 1k subs plz🙏🙏

[@mr.mobinyt]

@@jacksonofficial001 Thank you for your favor, bro🔥🙏

[@sojibhasan1380]

Nice