Home Web Design CSS CSS Input Label Animation | HTML Form Placeholder Above Inputs

CSS Input Label Animation | HTML Form Placeholder Above Inputs

July 11, 2019

23051

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.

https://webdevtrick.com/wp-content/uploads/input-label-above-form.mp4?_=1

Now you can see this visually. If you like this, then get the source code of its.

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:

<label for="FirName">First Name</label>
<input id="FirName" type="text" class="styl"/>

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.

<!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='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script  src="function.js"></script>


</body>
</html>

<!DOCTYPE html>

<head>

<title>CSS Input Label Animation | Webdevtrick.com</title>

</head>

<body>

<h1>CSS Label Animation</h1>

<div>

<label for="FirName">First Name</label>

</div>

<div>

</div>

<div>

<label for="Massag">Your Massage</label>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/** 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;
}

/** 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.

/** 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');
  }
});

/** 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.

6 COMMENTS

Vardana Bhanot July 12, 2019 At 6:16 am

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.

Reply
Asraful Haque July 12, 2019 At 4:19 pm

Awesome tutorials! I loved the code!

Reply
Lovelesh singh July 14, 2019 At 5:37 pm

Thanku, its useful tutorial

Reply
Devesh August 11, 2019 At 8:43 am

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.

Reply
L August 15, 2019 At 8:20 am

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?

Reply
manojkumar October 27, 2020 At 10:22 am

how can this be implemented for dropdownlist’s

Reply