Hello readers, Today in this blog you’ll learn how to create an Animated Search Box/Bar using HTML CSS & JavaScript. Earlier I have shared a blog on how to create FullScreen Overlay Search Box Animation using only HTML & CSS and now it’s time to create an Elastic Animation on Search Bar with JavaScript.
The search box is the most important graphical element present in every website. It works as the field for a query input or searches term from the user to search and retrieve related data from the database. A simple search bar can make using HTML, CSS, and JavaScript only.
In this program [Animated Search Box], at first, on the webpage, there is only a search icon and when you click on that icon, then the search input appears with an elastic animation. When you type something and click on the search icon, your typed data is shown at the bottom of the search bar. There is also shown a cancel or hide icon [cross sign icon] and when you click on that cancel icon, the visible search input and your typed data will be hidden.
If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program [Elastic Animation on Search Bar].
Video Tutorial of Elastic Animation on Search Bar
In the video, you have seen an Animated Search Bar and I hope you’ve understood the basic codes behind creating this program. I used pure JavaScript to create this search bar so if you’re a beginner and you know a little bit of JavaScript, then you can easily create this type of search bar animation.
If you have knowledge of backend languages like PHP then you can add PHP code and connect this search box with the database to retrieve data according to the user queries. I believe this small search bar program will help you a lot. If you like this program [Elastic Animation on Search Bar] and want to get source codes. You can easily get the source codes of this program.
You might like this:
Animated Search Box [Source Codes]
To create this program [Elastic Animation on Search Bar]. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Animated Search Box | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="search-box">
<input type="text" placeholder="Type to search..">
<div class="search-icon">
<i class="fas fa-search"></i>
</div>
<div class="cancel-icon">
<i class="fas fa-times"></i>
</div>
<div class="search-data">
</div>
</div>
<script>
const searchBox = document.querySelector(".search-box");
const searchBtn = document.querySelector(".search-icon");
const cancelBtn = document.querySelector(".cancel-icon");
const searchInput = document.querySelector("input");
const searchData = document.querySelector(".search-data");
searchBtn.onclick =()=>{
searchBox.classList.add("active");
searchBtn.classList.add("active");
searchInput.classList.add("active");
cancelBtn.classList.add("active");
searchInput.focus();
if(searchInput.value != ""){
var values = searchInput.value;
searchData.classList.remove("active");
searchData.innerHTML = "You just typed " + "<span style='font-weight: 500;'>" + values + "</span>";
}else{
searchData.textContent = "";
}
}
cancelBtn.onclick =()=>{
searchBox.classList.remove("active");
searchBtn.classList.remove("active");
searchInput.classList.remove("active");
cancelBtn.classList.remove("active");
searchData.classList.toggle("active");
searchInput.value = "";
}
</script>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
place-items: center;
background: #664AFF;
}
::selection{
color: #fff;
background: #664AFF;
}
.search-box{
position: relative;
height: 60px;
width: 60px;
border-radius: 50%;
box-shadow: 5px 5px 30px rgba(0,0,0,.2);
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.search-box.active{
width: 350px;
}
.search-box input{
width: 100%;
height: 100%;
border: none;
border-radius: 50px;
background: #fff;
outline: none;
padding: 0 60px 0 20px;
font-size: 18px;
opacity: 0;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.search-box input.active{
opacity: 1;
}
.search-box input::placeholder{
color: #a6a6a6;
}
.search-box .search-icon{
position: absolute;
right: 0px;
top: 50%;
transform: translateY(-50%);
height: 60px;
width: 60px;
background: #fff;
border-radius: 50%;
text-align: center;
line-height: 60px;
font-size: 22px;
color: #664AFF;
cursor: pointer;
z-index: 1;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.search-box .search-icon.active{
right: 5px;
height: 50px;
line-height: 50px;
width: 50px;
font-size: 20px;
background: #664AFF;
color: #fff;
transform: translateY(-50%) rotate(360deg);
}
.search-box .cancel-icon{
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 25px;
color: #fff;
cursor: pointer;
transition: all 0.5s 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.search-box .cancel-icon.active{
right: -40px;
transform: translateY(-50%) rotate(360deg);
}
.search-box .search-data{
text-align: center;
padding-top: 7px;
color: #fff;
font-size: 18px;
word-wrap: break-word;
}
.search-box .search-data.active{
display: none;
}
That’s all, now you’ve successfully created an Animated Search Box using HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.
This is awesome, I just needed to adjust media query for smaller mobile like samusng fold, Thank you very much.
thanxs bro
You’re welcome
Hi, by any chance do you have a tutorial of how to make the search button actually work? What I mean is that for example i search for: apples and then results to show up.
Here is the blog of it – https://www.codingnepalweb.com/search-bar-autocomplete-search-suggestions-javascript/
can we make suggestions IN HTML
No, you can’t
So i like your works
Thank you so much
You are the best bro
Thanks bro
You are awesome bro
Thanks bro
You are Awesome Brother. Please make a video on how to create a forum website step by step. Thank you.
Okay brother
How can I get it at the top &right and a little bit smaller??
You have do changes on codes like add anchor tag inside each li and many more. You can contact me here – [email protected]
Hi how can i add a link so you click on it and it leads you somewhere? 🙂
you can add an a tag
and add href in it
like this:
home