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

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


Welcome to Code With Random blog. In this article, we create a Hidden Search Bar. We use Html, Css, And JavaScript for Search Bar project code.

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

100+ Front-end Projects for Web developers (Source Code)

HTML code for Search bar

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

There is all html code for the search bar. Now, you can see output without css and javascript code. Then we write css and javascript for our search bar.

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

Html output search bar



CSS Code for Search bar 

 @import url(';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;
.input:focus {
outline: none;
} .input {
width: 200px;
} .btn {
transform: translateX(198px);
Now we have completed our css section for the search bar.  Here is our updated output with html and css for the search bar.
Html css search bar output



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

Javascript code for Search bar

const search = document.querySelector('.search')
const btn = document.querySelector('.btn')
const input = document.querySelector('.input')
btn.addEventListener('click', () => {

Final output Search bar



5+ HTML CSS project With Source Code

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 

Share on:

Leave a Comment