Open In App

How to Create an Animated Search Box using HTML and CSS ?

Last Updated : 27 Jan, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

The task is to create an Animated Search Box using HTML and CSS. The search bar is one of the most important components of the website. Basically, it is used for connecting people with websites. In the face of complicated web content, users express their needs by searching keywords, expecting to obtain accurate information and quick result. 

Approach:

Step 1: Here we used an input element in the HTML section. 

<input type="text" name="search" 
    placeholder="Search anything here .."> 

Step2: Add CSS code to make it attractive.

input[type=text] {
    width: 150px;
    box-sizing: border-box;
    border: 4px solid green
    border-radius: 6px;
    font-size: 26px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px;  
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.3s ease-in-out; 
}
input[type=text]:hover {
    width: 90%;
}

Example: 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        h1 {
            color: green;
        }
          
        input[type=text] {
            width: 150px;
            box-sizing: border-box;
            border: 4px solid green;
            border-radius: 6px;
            font-size: 26px;
            background-color: white;
            background-image: url('searchicon.png');
            background-position: 10px 10px;
            background-repeat: no-repeat;
            padding: 12px 20px 12px 40px;
            -webkit-transition: width 0.4s ease-in-out;
            transition: width 0.3s ease-in-out;
        }
          
        input[type=text]:hover {
            width: 90%;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>
        Create an Animated Search 
        Box using HTML and CSS
    </h2>
  
    <form>
        <input type="text" name="search" 
            placeholder="Search..">
    </form>
</body>
  
</html>


Output:



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads