Telegram Group Join Now

Create Working Search Bar HTML, CSS & JavaScript

Welcome to the blog for Code With Random. We explain how to design a functional Search bar in this article. The search bar project code is written in HTML, CSS, and JavaScript Code.

Create Search Bar HTML, CSS & JavaScript

The area of an Internet browser where you can search the Internet for what you’re looking for is called the search bar. For instance, the image depicts the search bar in Firefox, which not only enables Internet searching but also allows you to select the specific search engine you wish to use.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Hope you enjoy our blog so let’s start with a basic HTML structure for a Search bar.

Code by	N/A
Project Download	Link Available Below
Language used	HTML, CSS, And JavaScript
External link / Dependencies	YES
Responsive	YES

Search Bar Table

Codepen Preview:

See the Pen <a href="https://codepen.io/arun020/pen/ZEjGgLM" rel="nofollow noopener" target="_blank"> Untitled</a> by Arun (<a href="https://codepen.io/arun020" rel="nofollow noopener" target="_blank">@arun020</a>) on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.

Create Simple Portfolio Website Using HTML and CSS

HTML code for Search bar

HTML stands for HyperText Markup Language. This is a markup language. Its main job is to give our project structure. We will provide our project structure by utilising this markup language. So let’s look at our HTML code.

We start with the HTML file. First, copy the code below and paste it into your HTML file inside your IDE.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css" />
<title>Hidden Search</title>
</head>
<body>
<div class="search">
<input type="text" class="input" placeholder="Search...">
<button class="btn">
<i class="fas fa-search"></i>
</button>
</div>
<script src="script.js"></script>
</body>
</html>

We must update certain links before we start our search box project. In order to complete this project, we had to connect the three distinct files we utilised for our HTML, CSS, and JavaScript. In order to achieve this, kindly place links to our CSS inside the header.

Weather App Using Html,Css And JavaScript

All of the links for the various icons that we utilised in our project must be embedded. You must include the Javascript file inside the HTML’s body if you want to link it to our HTML file.

The search bar’s HTML code may be found here. You can now view the output without using JavaScript or CSS. The search bar is then created using CSS and Javascript.

//Head section 
<link rel="stylesheet" href="style.css"> 
<script src="https://kit.fontawesome.com/1cf483120b.js" crossorigin="anonymous"></script>	
<script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAi0RCj8aLdKFX-cvYkW6kDveuaUlMnpes&libraries=places&callback=initMap"></script> 
//Body Section 
<script src="index.js"></script>

Now let’s Add the structure for our hidden Searchbox.

We’ll use the basic html elements to add the structure of our searchbox.

Using the div tag, with class as “search” we willl create the container for our searchbar.
Now we’ll make a div tag that will be utilised to provide text suggestions when the user fills into the search field.
Using the font-awesome class we will add an search icon inside our searchbox.

We don’t require anything else to build the structure for our image editor. Now that we are using CSS, we will style our image editor. But let’s look at our structure first.

Output:

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

Html output search bar

Create Search Bar HTML, CSS And JavaScript — Search Bar Html Code Preview

CSS Code for Search bar

 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
* {
box-sizing: border-box;
}
body {
background-image: linear-gradient(90deg, #7d5fff, #7158e2);
font-family: 'Roboto', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.search {
position: relative;
height: 50px;
}
.search .input {
background-color: #fff;
border: 0;
font-size: 18px;
padding: 15px;
height: 50px;
width: 50px;
transition: width 0.3s ease;
}
.btn {
background-color: #fff;
border: 0;
cursor: pointer;
font-size: 24px;
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 50px;
transition: transform 0.3s ease;
}
.btn:focus,
.input:focus {
outline: none;
}
.search.active .input {
width: 200px;
}
.search.active .btn {
transform: translateX(198px);
}

After we’ve added the CSS code, we’ll go over it step by step. To save time, you can simply copy this code and paste it into your IDE. Let us now examine our code step by step.

Step1:First, we’ll use the import link to include the Roboto font from Google Fonts. Using the universal selection, we will set the box-sizing to the border box and the margin and padding to “zero”. Roboto is chosen as the font family using the font-family attribute.

Math Game using HTML, CSS & JavaScript

Now, we’ll layout our website’s body utilising the body tag selector. We’ll set the display to the flex and the background of our body to a linear gradient of “dark purple” and “light purple.” The overflow attribute will be used to set the overflow to “hidden,” the margin to “zero,” and the body height to 100 vh.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
* {
    box-sizing: border-box;
}

body {
    background-image: linear-gradient(90deg, #7d5fff, #7158e2);
    font-family: 'Roboto', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

Step2:We’ll set the background colour of our search field to “white” and the border to “0” using the class selector (.search). We will increase the width with an easy effect by setting the width and height values to “50px” and the transition property.

We will now style the search box button by setting the backdrop colour to “white,” the cursor type to “pointer,” and the space to “zero” using the top and left attributes. The width of our concealed searchbar will rise as a result of the addition of various classes to our search box.

.search {
    position: relative;
    height: 50px;
}

.search .input {
    background-color: #fff;
    border: 0;
    font-size: 18px;
    padding: 15px;
    height: 50px;
    width: 50px;
    transition: width 0.3s ease;
}

.btn {
    background-color: #fff;
    border: 0;
    cursor: pointer;
    font-size: 24px;
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
    width: 50px;
    transition: transform 0.3s ease;
}

.btn:focus,
.input:focus {
    outline: none;
}

.search.active .input {
    width: 200px;
}

.search.active .btn {
    transform: translateX(198px);
}

css search bar output

Create Hidden Search Bar HTML, CSS And JavaScript (Source Code)

Now add javascript for the open & close Search bar and then we search anything in the Search bar.

10+ HTML CSS Projects For Beginners with Source Code

Javascript code for Search bar

const search = document.querySelector('.search')
const btn = document.querySelector('.btn')
const input = document.querySelector('.input')
btn.addEventListener('click', () => {
search.classList.toggle('active')
input.focus()
})

First, we will choose the HTML input and button elements using the document. queryselector() method. Click the button now. Using the toggle function, we will add and remove the active class inside our hidden searchbar icon as soon as the user clicks the search button in addEventListener ().

Final output Search bar

5+ HTML CSS project With Source Code

Live output Search bar

Now we have completed our javascript section for the Search bar. Here is our updated output with Html, Css, and Javascript code for the search bar. Hope you like the search bar.

You can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you

In this post, we learn how to create a hidden search bar using simple html & css, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – code with random/anki

Which code editor do you use for this Search Bar project coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.