How we can create an Input Label Animation Using HTML CSS & JS? Solution: CSS Input Label Animation, HTML Form Placeholder Shift Above The Inputs On Click.
I am sure that you know what is Form’s label & placeholder. In HTML, the <label>
tag is used to create labels for items in a user interface, & The placeholder attribute specifies a short hint that describes the value of an input field. Now question is that, can we use a single label for a placeholder also? Yes, we can use an <label>
as a label & as a Placeholder.
Today you will learn to create an Input label animation. Which behave like a placeholder but when you click on the input field then its shift on above the input & became a label. Old days are gone when peoples used placeholder & label together in a form. You can use this on your website because this is the latest & on trend.
So, Today I am sharing CSS Input Label Animation. In other words, An HTML Form Placeholder Which Goes Above The Inputs On Click. I have used jQuery with HTML & CSS, We also can use Pure JS but jQuery is very easy. I have used jQuery for add & remove a single class from HTML element, Left all major works done in CSS HTML.
If you are thinking now how this input label & placeholder animation actually is, then see the preview given below.
Preview Of HTML Form Placeholder Above Inputs
See this video preview to getting an idea of how this project’s animation looks like.
Now you can see this visually. If you like this, then get the source code of its.
You May Also Like:
- CSS Custom Scroll Bar
- Custom HTML CSS Select Option
- Floating Social Share Buttons
- 3D Image Gallery CSS
CSS Input Label Animation Source Code
Before sharing source code, let’s talk about this. In the HTML section, I have created 3 inputs with their own label, to declare each label for input I used ID & FOR. Example:
1 2 |
<label for="FirName">First Name</label> <input id="FirName" type="text" class="styl"/> |
In the same way, created 2 other inputs, you can create many inputs as your requirement. The class= "styl"
is a temporary class which will change by jQuery. In CSS file I have placed the label middle of input, that looks like a placeholder. When you click on the input then the label’s text goes upper side or above the input.
After that, I have created a class named ‘active‘ In this class, I placed the label by -25 pixels on top. It goes on top with some delay using the CSS transition. Now jQuery (get) replaces the ‘styl‘ class with this ‘active‘ class. That’s it the whole concept.
For creating this input label animation, you have to create 3 files. First for HTML, second for CSS, & third for JS. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html> <!--Code By Webdevtrick ( https://webdevtrick.com )--> <html lang="en" > <head> <meta charset="UTF-8"> <title>CSS Input Label Animation | Webdevtrick.com</title> <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans+SC&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="main"> <h1>CSS Label Animation</h1> <div> <label for="FirName">First Name</label> <input id="FirName" type="text" class="styl"/> </div> <div> <label for="LasName">Last Name</label> <input id="LasName" type="text" class="styl"/> </div> <div> <label for="Massag">Your Massage</label> <input id="Massag" type="text" class="styl"/> </div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
/** Code By Webdevtrick ( https://webdevtrick.com ) **/ * { letter-spacing: 3px; font-family: 'Alegreya Sans SC', sans-serif; } body { color: white; background-color: #f05855; } h1 { font-size: 60px; margin: 0px; padding: 0px; text-align: center; } div.main { width: 700px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); vertical-align: middle; } div.main div { position: relative; margin: 40px 0; } label { position: absolute; top: 0; font-size: 30px; margin: 10px; padding: 0 10px; background-color: #f05855; -webkit-transition: top .2s ease-in-out, font-size .2s ease-in-out; transition: top .2s ease-in-out, font-size .2s ease-in-out; } .active { top: -25px; font-size: 20px; font-weight: 900; letter-spacing: 6px; text-transform: uppercase; } input[type=text] { width: 100%; padding: 20px; border: 2px solid white; font-size: 20px; font-weight: 800; background-color: #f05855; color: white; } input[type=text]:focus { outline: none; } |
function.js
Now create a JavaScript file named ‘function.js‘ and put the codes.
1 2 3 4 5 6 7 8 9 10 |
/** Code By Webdevtrick ( https://webdevtrick.com ) **/ $('input').on('focusin', function() { $(this).parent().find('label').addClass('active'); }); $('input').on('focusout', function() { if (!this.value) { $(this).parent().find('label').removeClass('active'); } }); |
That’s It. Now you have successfully created CSS Input Label Animation, An HTML Form Placeholder Which Goes Above Inputs On Click. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
Hey hi thanks for the code but do you know how to make borders of input have gradient, I tried border-image but it cannot have border-radius
In case you know something about how to have a input border gradient and curved at edges.
Awesome tutorials! I loved the code!
Thanku, its useful tutorial
when i am putting javascript code in function.js it shows errors like $ was used before it was defined .Can u please help me with this.
Thanks for the tutorial!
Unfortunately I can’t seem to separate the labels: as soon as I click on name all of them activate. Do you have a solution for this problem?
how can this be implemented for dropdownlist’s