DEV Community

Cover image for How to Make an Animated Search Bar with using only HTML and CSS
Alteca
Alteca

Posted on

How to Make an Animated Search Bar with using only HTML and CSS

Intro

In this article, as you've probably read in the title, I will show you how to create an animated search bar using HTML and CSS.

Note: This requires a basic understanding of both HTML and CSS.

Code

Basic layout

First we need to layout the basic elements for our project. I like using the HTML5 Boilerplate extension for this, the extension can be installed in the VSCode extension store. If you prefer doing everything manually then do that instead.

<!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>Animated search bar demo</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

As you can see I also linked a css file which we will need later, and added a title.

Input element

Now create an input element enclosed by a <div> element. You can make the placeholder whatever you want it to be, but make sure to set the type to text .

    <div>
        <input type="text" placeholder="Search Anything...">
    </div>
Enter fullscreen mode Exit fullscreen mode

SVG File

We also need a search icon for our search bar. For this i am using an SVG file from heroicons.com as it is very easy to copy the icon from their library. Just go to their site, search "search" and hover over the magnifying glass icon, then click on "Copy as SVG". Now that you've copied it, paste the icon inside the <div> element.

Make sure to paste it after the <input> as shown below.

 <div>
        <input type="text" placeholder="Search Anything...">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
            class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round"
                d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
        </svg>
    </div>
Enter fullscreen mode Exit fullscreen mode

CSS

Now that we've layed out all our HTML, we need to start creating the CSS for this project.

First we need to reset everything and then style our input element.

*{
    margin: 0;
    padding: 0;
}
Enter fullscreen mode Exit fullscreen mode

Now we need to make our input element fancy by slapping on some animations and making there only be on border at the bottom.

input {
    padding: 1rem 1rem;
    font-size: 30px;
    width: 30%;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 3px solid black;
    transition: all 300ms ease-in-out;

}
Enter fullscreen mode Exit fullscreen mode

Now we need the input box to transition when it is clicked on, this means we need the :focus selector.

input:focus {
    border-bottom: 3px solid rgb(0, 158, 66);
    outline: none;
    width: 65%;
}
Enter fullscreen mode Exit fullscreen mode

After this we need to make the SVG a certain size as right now it covers up half of the screen.

svg {
    width: 10%;
    margin-left: 5%;
}
Enter fullscreen mode Exit fullscreen mode

Finally we need to add a finishing touch by centering the element on the screen.

div {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    margin-top: 50px;
    width: 80%;
}
Enter fullscreen mode Exit fullscreen mode

Here's all the code in one piece if you had a hard time hanging on to the snippets I gave you:

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>Animated search bar demo</title>
    <link rel="stylesheet" href="indes.css">
</head>

<body>
    <div>
        <input type="text" placeholder="Search Anything...">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
            class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round"
                d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
        </svg>
    </div>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

CSS:

*{
    margin: 0;
    padding: 0;
}
input {
    padding: 1rem 1rem;
    font-size: 30px;
    width: 30%;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 3px solid black;
    transition: all 300ms ease-in-out;

}
input:focus {
    border-bottom: 3px solid rgb(0, 158, 66);
    outline: none;
    width: 65%;
}
svg {
    width: 10%;
    margin-left: 5%;
}
div {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    margin-top: 50px;
    width: 80%;
}
Enter fullscreen mode Exit fullscreen mode

Outro

So here you have it, a nicely animated search bar with a great expansion animation, feel free to use this in your own projects, I would love this project to actually gain some functionality, so thanks in advance.

Top comments (6)

Collapse
 
israelmitolu profile image
IsraelMitolu

Can you add a codepen? Or a GIF
So we can see how the effect looks. Thanks

Collapse
 
alteca profile image
Alteca

Did it work for you? If you got it right then the search bar should expand when you click on it and and turn green. I will add a codepen soon.

Thanks for letting me know you liked it

Collapse
 
kokiey profile image
Koketso

This is cool.

Collapse
 
alteca profile image
Alteca

It is a cool animation, though very simple to make. Thanks for the feedback

Collapse
 
vistar profile image
Vitaliy

Please add demo, on codepen i.e.

Collapse
 
alteca profile image
Alteca

I will