How Style Awesome Input Field Animation HTML&CSS Source Code

Kunjan Koiri
July 31, 2023

How to style awesome Input field animation HTML&CSS with Source Code

How to style awesome Input field animation HTML&CSS with Source Code


Hi guys, once again I have brought for you a new animation which will tell you about How to styling Search awesome Input field animation in advanced HTML & CSS with Source Code.


Let me tell you that you need to know about advanced CSS to do this awesome input animation. This is absolutely easy, you just have to learn whatever is included in the latest CSS3.


Before I start, I want to promote that I have already posted some posts related to this awesome animation, so you can see it with the source code to get you some ideas.


So let's start the tutorial, like every post, in this post also you will be told in a few steps.


Steps 1: HTML Build

We have used VS CODE editor, so you can use any editor that you can use, otherwise you can search in Google.


By using emmet, we have opened the boilerplate of HTML, through emmet, you can handle the code easily.


How to CSS Neon Glowing Snake Border Animation Button with Source Code


I have used external CSS and taken a div inside the body tag which has a class form, through this I will style the input. Input tag type text and label tag inside that div.


Step 2: Awesome input field animation

Now it is time to style the chassis, so let's start with the first universal operator, in which the margin and padding are zeroed and the box-sizing is border-boxed. By default, our browser takes margin and padding.


Now we will style the body so that all the divas inside it will come in a row, so the width and height of the body is 100 and the display has been flexed and justified - content: center; And align-items: center;


Now is the time to style the class form within the form is width: 300px; , Height: 50px; and position: relative; .


Then select the input inside the form class as its width and height: 100%; Background; transparent; Border; Padding; Outline; and font-size; Have given.


Then select Label inside it, whose position: Absolute; It has also done other properties such as top; left; color; text-transfer; font-size; Transition; Padding; and pointer-events; Has been used.


Now finally let us focus on the input, in which top: apps; and background-color; It has been animated to use.


If you still do not come into society, then it does not matter, I have already made a video on it, after seeing it you will come into society. If I have given its source code below, then check it out


Watch Video:




HTMl & CSS Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation Form</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            width: 100vw;
            height: 100vh;
            background-color: #2c3e50;
            display: flex;
            justify-content: center;
            align-items: center;
        }
       .form{
           width: 300px;
           height: 50px;
           position: relative;
       }
       .form input{
           width: 100%;
           height: 100%;
           background: transparent;
           border: 2px solid #2ecc71;
           border-radius: 10px;
           outline: none;
           padding: 0 10px;
           font-size: 20px;
       }
       .form label{
        position: absolute;
        top: 15px;
        left: 15px;
        color: white;
        text-transform: capitalize;
        font-size: 18px;
        transition: top .3s;
        padding: 0 5px;
        pointer-events: none;
       }
       .form input:focus ~ label {
           top:-9px;
        background-color:#2c3e50 ;
       }
    </style>
</head>
<body>
    <div class="form">
        <input type="text" required>
        <label for="">search</label>
    </div>
</body>
</html>