Simple Way to Highlight Input Field on Focus with HTML, CSS, and JavaScript

Author - Maketechstuff
January 27, 2023
0

Highlighting an input field on focus is a great way to make your web forms more user-friendly and visually appealing. It can also help to draw attention to the input field and make it easier for users to see where they should enter their information. 

In this blog post you'll learn how to create animated input field with floating placeholder step by step. You may have seen this type of input field, that when you focus on input field its get highlighted. We going to highlight the input field with animation using HTML, CSS & JavaScript.


By the end of this tutorial you'll be able to make your own and customize animated input field using html css and javascript. You'll find full source code at the end of this blog post.


input field animation


So, its easy to highlight input field when focused. Here actually input field is not highlighted. its a span tag that is shown. Which is initially set to bottom centre of input field with width:0% and when input field is focused then width change to 100%.

So here I made a simple input field and button, you can say a search bar. the main focus of this blog post is to highlight input field with animation when focused.


Video Tutorial on Animated Input Field:



Highlight Input Field on Focus.

File structure:

  1. Create one folder.
  2. Open it in your code editor.
  3. Create two files in that folder index.html and index.css.

I’ve integrated javascript within the html file inside the script tag. You can create a separate file and link it to an html file.


Step 1: Create a Simple Input Field With Button.

First let's create an input field with button using HTML and CSS. With animated (sliding) placeholder.

And also add one span tag. That is for highlighting the input field.

We'll position the span tag right above the input field bottom border in the center. And make it width 0% initially (when input field not focused).

See below code for better understanding.

HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>

    <div class="main_box">
        <div class="container">

            <form action="#">
                <div class="box">

                    <div class="input_box">
                        <input type="text" class="input" required>
                        <!-- placeholder -->
                        <label class="label">Search</label>
                        <!-- For highlighting input field bottom border -->
                        <span class="span"></span>
                    </div>

                    <button class="button" type="submit">Search</button>
                </div>
            </form>

        </div>
    </div>
    
</body>
</html>

CSS


*{
    padding: 0;
    margin: 0;
}
.main_box{
    width: 100%;
    height: 100vh;
    background: linear-gradient(90deg , #d4d4d4 , #d0d3ff);
    display: flex;
    align-items: center;
    justify-content: center;
}
.container{
    width: 500px;
    padding: 20px;
    background-color: #fff;

}
.box{
    width: 100%;
    display: flex;
    align-items: center;
}
.box .input_box{
    width: 100%;
    border-bottom: 1px solid #000;
    margin-right: 20px;
    position: relative;
}
.box .input{
    width: 100%;
    font-size: 25px;
    padding: 10px 6px;
    outline: none;
    border: none;
}
.box label{
    position: absolute;
    left: 0;
    top: 14px;
    color: #0000009e;
    pointer-events: none;
    font-size: 25px;
    transition: 0.2s;
}
.box span{
    position: absolute;
    width: 20%;
    height: 2px;
    top: 100%;
    left: 50%;
    transform: translate(-50% , -50%);
    background-color: blue;
    transition: 0.2s;
}
.box .button{
    font-size: 25px;
    padding: 10px 16px;
    border: none;
    background-color: #000;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}
.box .button:active{
    background-color: #0000009e;
    transform: scale3d(0.9, 0.9, 0.9);
}

Output: 


Animated input field when focused.


As you can see in image above, there is a blue line, that is span tag, I have added width:20% to it, so that it can visible to you. Later we'll set width:0% . 

To highlight input field on focus we'll update this span tag width from 0% to 100% with animation. And again set width to 0% when input field blur.

So let set width:0% to span tag.


CSS


.box span{
    position: absolute;
    width: 0%;
    height: 2px;
    top: 100%;
    left: 50%;
    transform: translate(-50% , -50%);
    background-color: blue;
    transition: 0.2s;
}


Step 3: Highlight Input Field and Float Up Placeholder (animation).

So first, define variables.

JavaScript


    let input = document.querySelector('.input');
    let placeholder = document.querySelector('.label');
    let span = document.querySelector('.span');


Then after defining variable, We'll run a function on focus event and on blur event on input field.


When input field focus we'll slide placeholder up and change font-size and color of placeholder (label tag). And make span tag (line that highlight the input field) width to 100%.


When input field blur (unfocus) we'll slide placeholder down and change font-size and color of placeholder (label tag). And make span tag (line that highlight the input field) width to 0%.


JavaScript


    input.onfocus = function(){
        placeholder.style.top = '-10px';
        placeholder.style.fontSize = '16px';
        placeholder.style.color = 'blue';

        span.style.width = '100%';
    }

    input.onblur = function(){
        if (input.value == '') {
            
            placeholder.style.top = '14px';
            placeholder.style.fontSize = '25px';
            placeholder.style.color = '#0000009e';
            
            span.style.width = '0%';
            
        }
    }

Output: 

Before focus 


Animated input field when focused.


After focus 


Animated input field when focused.

So that's how you can animate input field on focus using HTML, CSS & JavaScript.

Final code : 



That's how you can highlight input field with animation on focus. If you have any question or suggestion feel free to write them in the comment section.


You may like:

  1. Add image/icon inside input field.
  2. Search bar design using HTML, CSS & JavaScript.
  3. Show button only when input field has value.
  4. How to create an animated input field with linear gradient border.
  5. How to get input field value using JavaScript.
  6. How to disable input field using Both HTML & JavaScript.
  7. Make input field to not take more than one space between words using JavaScript.


Tags

You may like these posts

Show more

Post a Comment

0Comments

Share your thoughts.

Post a Comment (0)
Share to other apps
Copy Post Link
To Top