How to create a search bar using HTML, CSS and JavaScript
Creating a search bar using HTML, CSS and JavaScript are pretty much easy. Today we are going to do that. All you need to do is, just copy and paste the following HTML, CSS, and javascript code.
Disclaimer: Don’t copy and paste if you don’t know anything about HTML, CSS, and, javascript. First, learn the basics, then try to create a project like this.
Read More: Visual Studio Code “Error while fetching extensions. XHR failed – V”
Step 1
Add 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>Home</title>
</head>
<body>
<div class="search">
<div class="icon"></div>
<div class="input">
<input type="text" placeholder="Search" id="mysearch">
</div>
<span class="clear" onclick="document.getElementById('mysearch').value = ''"></span>
</div>
</body>
</html>
Step 2
Add CSS
Don’t forget to link up the CSS file with HTML or you can write the CSS code into the HTML file.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f04424;
}
.search {
position: relative;
width: 60px;
height: 60px;
background-color: #fff;
border-radius: 60px;
transition: 0.5s;
box-shadow: 0 0 0 5px #f04424;
cursor: pointer;
overflow: hidden;
}
.search.active {
width: 360px;
}
.search .icon {
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
background-color: #fff;
border-radius: 60px;
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
}
.search .icon::before {
content: '';
position: absolute;
width: 15px;
height: 15px;
border: 3px solid #f04424;
border-radius: 50%;
transform: translate(-4px, -4px) ;
}
.search .icon::after {
content: '';
position: absolute;
width: 3px;
height: 12px;
background-color: #f04424;
transform: translate(6px, 6px) rotate(315deg);
}
.search .input {
position: relative;
width: 300px;
height: 60px;
left: 60px;
display: flex;
justify-content: center;
align-items: center;
}
.search .input input {
position: absolute;
top: 0;
width: 100%;
height: 100%;
border: none;
outline: none;
font-size: 18px;
padding: 10px 0;
}
.clear {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 15px;
height: 15px;
right: 15px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.clear::before {
position: absolute;
content: '';
width: 1px;
height: 15px;
background-color: #999;
transform: rotate(45deg);
}
.clear::after {
position: absolute;
content: '';
width: 1px;
height: 15px;
background-color: #999;
transform: rotate(315deg);
}
Step 3
Add JavaScript
Also, don’t forget to link up the javascript file with HTML. And also in this case you can write the javascript code into the HTML file (Using the <script></script> tag.
const icon = document.querySelector('.icon');
const search = document.querySelector('.search');
icon.onclick = () => {
search.classList.toggle('active')
}
The Final Result for the search bar
If you don’t know HTML, CSS, and JavaScript, then learn it from here or visit w3schools.com and happy HTML CSS JS journey.
What is your reaction?
