In this article, we'll learn how to create a custom search bar design with HTML and CSS which have basic functionality to remove the value inside the search bar on click, to search the new query. This tutorial covers everything you need to know, from creating the basic markup to adding styling with CSS.
This guide includes step-by-step instructions, code examples, and screenshots. It's perfect for web developers of all levels who want to learn how to create a custom search bar that fits their website's design.
You may have seen search bar in many website that, when you type query or text, an close image will appear and when you click on that image, it will empty the search bar, so that user don't have to remove their big querys by continously pressing backspace.
Video Tutorial of Search Bar Design.
Search Bar With HTML & CSS.
In this article we going to make search bar that shows the image (use to clear the input field), when it has vaue in it. And by click on that image, search bar value will be empty and that image also hide. To empty the search bar on click, show and hide image, we'll use JavaScript.
File structure:
- Create one folder.
- Open it in your code editor.
- Create two files in that folder index.html and index.css.
I’ve integrated javascript within the html file inside the script tag. You can create a separate file and link it to an html file.
Step 1: Creating simple search bar design.
First we'll create a simple design of search bar (designing the input field). And also add image inside it for empty the value present in input field on click.
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>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="box">
<form action="#">
<div class="input-box">
<input type="text" class="search" placeholder="Search">
<img src="images/cancel.png" class="close-image">
<button type="submit" class="button-box">
<img src="images/search.png" class="search-image">
</button>
</div>
</form>
</div>
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
}
.container{
width: 100%;
height: 100vh;
background: linear-gradient(45deg, #454ca0, #a91fa5);
position: relative;
}
.container .box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
width: 500px;
background-color: #fff;
box-shadow: 0px 2px 30px -20px rgb(0 0 0);
transition: 0.2s;
border-radius: 50px;
padding: 15px 20px;
}
.box .input-box{
width: 100%;
display: flex;
align-items: center;
}
.input-box input{
width: 100%;
font-size: 25px;
border: none;
outline: none;
}
.input-box .close-image{
width: 20px;
height: 20px;
cursor: pointer;
margin-left: 15px;
}
.input-box .button-box{
outline: none;
border: none;
background-color: transparent;
margin-left: 10px;
}
.input-box .search-image{
width: 30px;
height: 30px;
padding-left: 15px;
border-left: 1px solid #000;
cursor: pointer;
}
Step 2: Adding JavaScript to show and hide image.
So first we'll define the variables. Then call a function on page load. (The function call when page loads.). and on input event.
So input field will be checked on page load and on user input for value presences. If present we show the cancel image if not present we hide the cancel image.
Declaring the function. We'll check, is input field is empty or not. If empty we hide the cancel image by CSS property display: none; and if input field is not empty (has a value) then we'll show the image by display: block; property of CSS.
As the function run on page load also, show when on page load if no value present in input field. The cancel image won't show initially. (No need to change in code of css file).
JavaScript
let search = document.querySelector('.search');
let close_image = document.querySelector('.close-image');
checkinputfield();
function checkinputfield(){
if(search.value == ''){
close_image.style.display = 'none';
}else{
close_image.style.display = 'block';
}
}
search.oninput = function(){
checkinputfield();
}
Now here the show and hide the image part is done. Now let write code to empty the input field when click on cancel image (image with class="close-image").
Step 3: Clear search bar value on click.
Its simple to clear input field on click. We'll run a function on click of cancel image. That clear the input field and hides the cancel image. You can also call a checkinputfield() function here instead of adding style to cancel image (close_image class) to hide.
JavaScript
close_image.onclick = function () {
search.value = '';
close_image.style.display = 'none';
}
- How to add an simple animation to input field on focus using HTML, CSS & JavaScript.
- How to get the input field value on click using JavaScript.
- How to make one input field value same as another input field value on checkbox selection.
- How to disable input field dynamically using JavaScript.
- How to animate the border of input field using HTML, CSS & JavaScript.
That's it search bar design using HTML, CSS and JavaScript is ready. If you have any query or suggestion, feel free to write them in the comment section.
Share your thoughts.