Hello Readers, Today in this article we will show you how to create a Search Box using HTML and CSS. This type of Expanding Search Bar is used on the websites for Search Result Find.
You easily create Expanding Search Bar HTML and CSS only without any jQuery then this article will definitely help you. For this, you need to have an idea about basic HTML and CSS then you can understand the following codes. It is designed in a completely modern way.
Some information about this CSS Search Box
Normally show search icon with the background color. When clicking the icon then expand the search bar with a close icon. you can search for anything on the search bar.
Watch the video tutorial to create CSS Search Box
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made this CSS Search Box step by step completely beautifully. So you can learn how to make these CSS Search bars. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this video CSS Search Box Tutorial. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- CSS Card Hover Effects Tutorial
- How To Create Accordion Menu using HTML & CSS
- Personal Portfolio Website using HTML & CSS
CSS Search Box | Source Codes
You have to create HTML & CSS File For this menu. After creating these files just paste the following codes into your file.
The First Step, 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. You’ve to download files from the given download button to use images also.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Search Bar</title>
<!----CSS link----->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<input type="text" placeholder="Search...">
<div class="search"></div>
</div>
</body>
</html>Second Step, you have to 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.
CSS CODE:
@import url('https://fonts.googleapis.com/css?family=Poppins:700');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
width: 100%;
height: 100%;
}
body{
background: #f2f2f2;
}
.container{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 300px;
height: 100px;
}
.container .search{
position: absolute;
margin: auto;
top: 0;
right: 0;
left: 0;
bottom: 0;
width: 80px;
height: 80px;
background: crimson;
border-radius: 50%;
transition: all 1s;
z-index: 4;
box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.4);
}
.container .search:hover{
cursor: pointer;
}
.container .search:before{
content: "";
position: absolute;
margin: auto;
top: 22px;
right: 0;
bottom: 0;
left: 22px;
width: 12px;
height: 2px;
background: #fff;
transform: rotate(45deg);
transition: all 0.5;
}
.container .search:after{
content: "";
position: absolute;
margin: auto;
top: -5px;
right: 0;
bottom: 0;
left: -5px;
width: 25px;
height: 25px;
border-radius: 50%;
border: 2px solid #fff;
transition: all 0.5;
}
.container input{
font-family: 'Poppins', sans-serif;
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 50px;
height: 50px;
outline: none;
border: none;
background: crimson;
padding: 0 80px 0 20px;
border-radius: 30px;
box-shadow: 0 0 25px 0 crimson, 0 20px 25px 0 rgba(0, 0, 0, 0.2);
transition: all 1s;
opacity: 0;
z-index: 5;
font-weight: bolder;
letter-spacing: 0.1em;
color: #fff;
}
.container input:hover{
cursor: pointer;
}
.container input:focus{
width: 300px;
opacity: 1;
cursor: text;
}
.container input:focus ~ .search{
right: -250px;
background: #151515;
z-index: 6;
}
.container input:focus ~ .search:before{
top: 0;
left: 0;
width: 25px;
}
.container input:focus ~ .search:after{
top: 0;
left: 0;
width: 25px;
height: 2px;
border: none;
background: #fff;
border-radius: 0%;
transform: rotate(-45deg);
}
.container input::placeholder{
color: #fff;
opacity: 0.5;
font-weight: bolder;
}now you’ve successfully created this CSS Search Bar Tutorial using HTML and CSS. If your code does not work or facing any error/problem to comment down or contact us through the contact page.
