Search Bar in HTML CSS & JavaScript

byAnonymous -July 15, 2022

Hello friend, I hope you are doing awesome. Today you will learn to create a Search Bar in HTML CSS & JavaScript I will add some animation to our search bar also. Earlier I created a Seach Box using HTML and CSS only. But in today's search box I will add a few JavaScript.

Search Bars are the section where users can search for the things that they want to. Search Bar can be in different designs but the main objective of the search bar is to search.

Have a quick look on the given image of our search bar on the webpage. As you can see from the image of our search box. There is a search box, inside the search box there are two icons and a search section. Actually, in our real project, this search bar will be in closed form and when we click on the search icon then the search bar will open, and close the search bar we need to click on the cross icon. I have added beautiful cubic animation too.

To see the real demo of this search bar and its animation, you need to watch the give video tutorial of our search bar. Also by watching the video tutorial, you will get an idea about HTML CSS, and JavaScript codes that I have used to create this search bar.

Search Bar in HTML CSS & JavaScript | Video Tutorial

I have provided all the HTML CSS and JavaScript code that I have used to create this Search Bar. Before getting into the source code file, I would like to explain the given video tutorial briefly.

As you have seen in the video tutorial. At first, we saw one square shape box with a search icon. When I clicked on that square box, the search box opened and cross icons also appeared. When I clicked on that cross icon then the search bar closed and the cross icon disappeared. The search bar is created by HTML and CSS, for the animation, I have used CSS cubic bezier and to open and close the search bar I have used some JavaScript code.

I hope now you can create this search bar using HTML CSS and JavaScript. If you are feeling difficulty creating this sidebar, I have provided all the source code below.

You Might Like This:

Search Bar [Source Code]

To get the following HTML and CSS code for the Search Bar you need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.

HTML CODE:

<!DOCTYPE html><!-- Created By CodingLab - www.codinglabweb.com --> <!DOCTYPE html><!-- Coding by CodingLab | www.codinglabweb.com-->    <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 </title>-->         <!-- CSS -->        <link rel="stylesheet" href="css/style.css">                         <!-- Unicons CSS -->        <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">                             </head>    <body>        <div class="input-box">            <input type="text" placeholder="Search...">            <span class="icon">                <i class="uil uil-search search-icon"></i>            </span>            <i class="uil uil-times close-icon"></i>        </div>         <script>            let inputBox = document.querySelector(".input-box"),                 searchIcon = document.querySelector(".icon"),                 closeIcon = document.querySelector(".close-icon");              searchIcon.addEventListener("click", () => inputBox.classList.add("open"));             closeIcon.addEventListener("click", () => inputBox.classList.remove("open"));         </script>             </body></html>

CSS CODE:

/* Google Fonts - Poppins */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');  *{   margin: 0;   padding: 0;   box-sizing: border-box;   font-family: 'Poppins', sans-serif; } body{   height: 100vh;   display: flex;   align-items: center;   justify-content: center;   background: #4070f4;   overflow: hidden; } .input-box{   position: relative;   height: 55px;   max-width: 55px;   width: 100%;   margin: 0 40px;   border-radius: 6px;   background-color: #fff;   transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .input-box.open{   max-width: 350px; } input{   position: relative;   outline: none;   border: none;   height: 100%;   width: 100%;   border-radius: 6px;   font-size: 16px;   font-weight: 400;   color: #333;   background-color: #fff; } .input-box.open{   padding: 0 15px 0 65px; } .icon{   position: absolute;   height: 100%;   top: 0;   left: 0;   width: 60px;   border-radius: 6px;   display: flex;   justify-content: center;   background-color: #fff; } .search-icon, .close-icon{   position: absolute;   top: 50%;   font-size: 30px;   transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .search-icon{   color: #4070f4;      transform: translateY(-50%) rotate(90deg); } .input-box.open .search-icon{   transform: translateY(-50%) rotate(0); } .close-icon{   right: -45px;   color: #fff;   padding: 5px;   opacity: 0;   pointer-events: none;   transform: translateY(-50%); } .input-box.open .close-icon{   opacity: 1;   pointer-events: auto;   transform: translateY(-50%) rotate(180deg); }

Trending

BS Button Goups - Bootstarp Learn

The SQL COUNT, AVG And SUM - SQL Learn

SQL Index - SQL Learn

BS Glyphicons - Boostrap Learn

SQL Backup Database Statement - SQL Learn

Search Bar in HTML CSS & JavaScript

Search Bar in HTML CSS & JavaScript | Video Tutorial

You Might Like This:

Search Bar [Source Code]

Contact Form