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

Last Updated : 27 Jan, 2021

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> 