Working Search Bar HTML, CSS & JavaScript
Hello coders! In this article, we’ll create a working search bar by using HTML, CSS, and Javascript. We need a search-bar icon for this, which we can get easily from the font-awesome website. We’ll create the search bar like if we click the search icon the input textbox will expand and if we click the close icon again the input textbox will shrink by using eventListener() method.
What is a search bar?
The search bar is used to sort only particular information from a lot of information. The search bar is an important part of all search engines like Google, opera, Microsoft edge. Because clients search for the information they need in the search engine with queries in the search bar. It plays an important role not only in search engines but also in many websites and apps.
Live preview of the Search bar:
Follow the below steps to create a search bar like that.
HTML Step
We have to write the basic structure to create a search bar in HTML code. If you want to create this project, paste the HTML code below into the HTML file in your IDE. You must add the Remixicons CDN link between the <head> and </head> tags, then only the search icon and close icons will display.
<html>
<head>
<!--= REMIXICONS =-->
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
<title>working search bar</title>
</head>
<body>
<div class="container">
<form action="https://www.google.com/search" class="search" id="search-bar">
<input type="search" placeholder="Type something..." name="q" class="search__input">
<div class="search__button" id="search-button">
<i class="ri-search-2-line search__icon"></i>
<i class="ri-close-line search__close"></i>
</div>
</form>
</div>
</body>
</html>In this code, we have created the container <div> and within that, we’ve created the <form> tag.
Inside the form, we have created the <input> element with the type “search”.
And we have created another div tag inside the form for inserting the search and close icons using the <i> tag. By using the REMIXICONS class we will add a search and close icon inside our search box.
We don’t require anything else to build the structure and Now that we are using CSS, we will style. Before that, let’s look at our structure first.
HTML output:
CSS Step
<style type="text/css">
/*GOOGLE FONTS */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background-color: var(--body-color);
}
/*SEARCH*/
.container {
height: 100vh;
margin-inline: 1.5rem;
display: grid;
place-items: center;
background-color: pink;
}
.search {
position: relative;
width: 76px;
height: 76px;
background-color: var(--white-color);
box-shadow: 0 4px 24px hsla(222, 68%, 12%, 0.1);
border-radius: 4rem;
padding: 10px;
overflow: hidden;
transition: width 0.5s cubic-bezier(0.9, 0, 0.3, 0.9);
background-color: white;
}
.search__input {
border: none;
outline: none;
width: calc(100% - 64px);
height: 100%;
border-radius: 4rem;
padding-left: 14px;
font-family: Roboto;
font-size: var(--small-font-size);
font-weight: 500;
opacity: 0;
pointer-events: none;
transition: opacity 1.5s;
}
.search__input:-webkit-autofill {
box-shadow: 0 0 0 100px var(--white-color) inset;
}
.search__button {
width:56px;
height: 56px;
background-color: var(--dark-color);
border-radius: 50%;
position: absolute;
top: 0;
bottom: 0;
right: 10px;
margin: auto;
display: grid;
place-items: center;
cursor: pointer;
transition: transform 0.6s cubic-bezier(0.9, 0, 0.3, 0.9);
}
.search__icon, .search__close {
color: var(--white-color);
font-size: 1.5rem;
position: absolute;
transition: opacity 0.5s cubic-bezier(0.9, 0, 0.3, 0.9);
}
.search__close {
opacity: 0;
}
/* Search animated */
.show-search {
width: 100%;
}
.show-search .search__input {
opacity: 1;
pointer-events: initial;
}
.show-search .search__button {
transform: rotate(90deg);
}
.show-search .search__icon {
opacity: 0;
}
.show-search .search__close {
opacity: 1;
}
/* BREAKPOINTS*/
/* For medium devices */
@media screen and (min-width: 576px) {
.show-search {
width: 450px;
}
}
</style>After we’ve added the CSS code, our interactive style of the search bar will be added. But we haven’t created the search bar yet, if we add the javascript code, the input box will open when users click on the search icon. To save time, you can simply copy this code and paste it into your HTML code between <head> and </head>.
In this above code, we have imported the Google fonts link to use the Roboto font family. Then we styled the container, form, and icons separately. And finally, we’ve set breakpoints using a media query, this style applies if the min-width of the user device is 576px. After you paste this code, your output will look like this:
JS Step
In this step, we’ll expand the input text-box when the user clicks the button by using the addEventListener() function.
<script type="text/javascript">
const toggleSearch = (search, button) =>{
const searchBar = document.getElementById(search),
searchButton = document.getElementById(button)
searchButton.addEventListener('click', () =>{
// CSS show-search class, so that the search bar expands
searchBar.classList.toggle('show-search')
})
}
toggleSearch('search-bar', 'search-button')
</script>- In this js script, we have created the arrow function “
toggleSearch” with the parameter (search, button). - Inside the function, we retrieve the search bar element from the DOM (Document Object Model) using the provided ID. It assigns the element to the variable
searchBar. Similarly, we’ve also retrieved the search button element by ID and it assigns an element to the variable searchButton. - Then, we created addEventListener() for searchButton. If the user click the button, it presence of the CSS class ‘show-search’ on the searchBar element.
- Finally, we called the function toggleSearch by passing the
('search-bar', 'search-button')
So, our final output of the search bar looks like this:
