We will understand the search bar in CSS in this article. Let us first understand what a search bar is.
Search Bar
The search bar is a box present on a web page that permits users to search the content on the website.
It is used to search queries. You can enter the query in the search bar and press enter.
We can create a search bar with the help of CSS, which we will understand through demonstrations.
Demonstrations of Search Bar
Let's explore how to generate a search bar using CSS.
Demonstration 1:
We will build a basic search bar in this example using the <input> element to generate the input field and the <button> element to create the submit button positioned alongside the search bar.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Search Bar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h3>Search Bar</h3>
<input type="search" placeholder="Search here!">
<button type="submit"><i class="fa fa-search"></i></button>
</body>
</html>
Output:
Here is the result presented, showcasing a basic search bar.
Demonstration 2:
We will construct a basic navigation bar with a search field in this example.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Constructing a simple navigation bar with a search box</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
.nav-bar {
background-color: rgb(15, 134, 43);
height: 58px;
}
.menu {
float: left;
}
.menu ul {
display: flex;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
padding: 19px;
line-height: 58px;
text-decoration: none;
color: white;
}
.menu ul li a:hover {
background: rgb(41, 84, 61);
}
.box {
display: flex;
float: right;
margin: 10px 24px;
}
.search {
width: 175px;
height: 35px;
}
.button {
width: 45px;
background-color: rgb(144, 248, 97);
}
</style>
</head>
<body>
<div class="nav-bar">
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Find</a></li>
</ul>
</div>
<div class="box">
<input type="text" class="search" placeholder="Search here!" />
<button class="button"><i class="fa fa-search"></i></button>
</div>
</div>
</body>
</html>
Output:
Here is the result where we can observe the search field located within the navigation panel.
Demonstration 3:
In this example, we'll build a flexible navigation menu that adapts to different screen sizes, known as a responsive navigation bar. Additionally, we'll integrate a search field within the navigation bar.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Constructing a responsive navigation bar with a search box</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.nav {
overflow: hidden;
background-color: #f8ebeb;
}
.nav a {
display: block;
float: left;
text-decoration: none;
text-align: center;
color: black;
padding: 12px 15px;
font-size: 18px;
}
.nav a:hover {
background-color: #f7efef;
color: rgb(6, 6, 6);
}
.nav a.active {
background-color: #953f5a;
color: white;
}
.nav .search {
float: right;
}
.nav input[type=text] {
margin-top: 7px;
padding: 5px;
font-size: 18px;
border: none;
}
.nav .search button {
float: right;
padding: 5px 9px;
margin-right: 16px;
margin-top: 8px;
background: #ddd;
font-size: 18px;
border: none;
cursor: pointer;
}
.nav .search button:hover {
background: #efebeb;
}
@media screen and (max-width: 600px) {
.nav .search {
float: none;
}
.nav a, .nav input[type=text], .nav .search button {
float: none;
display: block;
margin: 0;
padding: 15px;
text-align: left;
width: 100%;
}
.nav input[type=text] {
border: 1px solid #e4e1e1;
}
}
</style>
</head>
<body>
<div class="nav">
<a class="active" href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
<div class="search">
<form action="/action_page.php">
<input type="text" placeholder="Search for query" name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
</body>
</html>
Output:
We can distinctly observe a navigation bar containing a search field when the screen is at maximum width:
If the screen size is modified, the navigation bar will adapt accordingly to the new size, as demonstrated in the following output:
Demonstration 4:
We are going to generate a dynamic search bar in this example.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Search Bar</title>
<style>
html {
background-color: #f0eaea;
}
form {
display: block;
left: 50%;
position: absolute;
top: 25%;
input[type=search] {
border: solid 4px #fbf3f3;
box-sizing: border-box;
margin-left: -15vw;
font-size: 2em;
height: 2em;
outline: solid rgb(255, 115, 0) 0;
width: 225px;
z-index: 1;
padding: .5em;
transition: all 2s ease-in;
&:focus {
border: solid 3px rgb(0, 255, 123) ;
outline: solid rgb(255, 115, 0) 2000px;
}
}
}
</style>
</head>
<body>
<form>
<input type="search" placeholder="Search here!">
</form>
</body>
</html>
Output:
When the search bar is not activated, we can observe the following result:
Upon clicking the search bar, an observable transition occurs where the background color of the webpage is altered, as demonstrated below:
Demonstration 5:
We will build an animated search box within a navigation bar in this example.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Building an animated search box in the navigation bar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
.nav-bar {
background-color: rgb(17, 73, 92);
height: 58px;
}
.menu {
float: left;
}
.menu ul {
display: flex;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
padding: 19px;
line-height: 58px;
text-decoration: none;
color: white;
transition: 0.6s;
}
.menu ul li a:hover {
background: rgb(13, 24, 18);
}
.box {
display: flex;
float: right;
margin: 10px 24px;
transition: width 0.5s;
}
.search {
padding: 10px;
width: 0;
transition: width 0.5s;
}
.search:focus {
width: 260px;
}
.button {
width: 60px;
background-color: rgb(195, 222, 245);
}
</style>
</head>
<body>
<h2>Welcome to C# Programming</h3>
<div class="nav-bar">
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">SQL</a></li>
<li><a href="#">PHP</a></li>
</ul>
</div>
<div class="box">
<input type="text" class="search" placeholder="Search here!" />
<button class="button"><i class="fa fa-search"></i></button>
</div>
</div>
</body>
</html>
Output:
Here is the displayed output showcasing the search bar and a search icon within the navigation bar, with the search box requiring full visibility.
When the visible section of the search bar is selected, the search bar expands, as demonstrated in the following result:
Demonstration 6:
In this example, we'll develop a dynamic search bar that expands exclusively upon clicking the search icon.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Search Bar</title>
<style>
@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
* {
padding: 0;
margin: 0;
font-family:'Times New Roman, Times, serif;
}
html, body {
height: 100%;
width: 100%;
}
.flexbox {
background: linear-gradient(155deg, #c09bc2, #dc9ee1, #275b6d);
display: flex;
justify-content: center;
width: 100%;
height: 100%;
align-items: center;
}
.search {
margin: 15px;
}
.search > h3 {
font-weight: bold;
}
.search > h1,
.search > h3 {
margin-bottom: 12px;
color: rgb(35, 11, 11);
text-shadow: 0 1px #76137d;
}
.search > div {
display: inline-block;
filter: drop-shadow(0 1px #76137d);
position: relative;
}
.search > div:after {
content: "";
position: absolute;
background: grey;
top: 40px;
right: 2px;
width: 6px;
height: 15px;
transform: rotate(135deg);
}
.search > div > input {
color: grey;
font-size: 16px;
background: transparent;
height: 25px;
width: 25px;
padding: 10px;
border-radius: 35px;
border: solid 4px grey;
outline: none;
transition: width 0.6s;
}
.search > div > input::placeholder {
color: black;
opacity: 0;
transition: opacity 140ms ease-out;
}
.search > div > input:focus::placeholder {
opacity: 1;
}
.search > div > input:focus,
.search > div > input:not(:placeholder-shown) {
width: 250px;
}
</style>
</head>
<body>
<div class="box">
<div class="search">
<h3>Click on the search icon and search for anything you want.</h3>
<div>
<input type="text" placeholder="Search here!" required>
</div>
</div>
</div>
</body>
</html>
Output:
Here is the result we can observe the search field, and when the search button is inactive, the appearance will be as follows:
Upon clicking the search icon, the entire search box will become visible below:
Demonstration 7:
In this example, we'll build a dynamic search bar with animation effects. Upon tapping the search icon, the search bar will smoothly expand revealing a close button. Upon clicking the close button, the search box will elegantly shrink back to its original size.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Creating an animated search bar</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Inconsolata:700');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
body {
background: #4b0303;
}
.container {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100px;
width: 300px;
.search {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 75px;
width: 75px;
background: rgb(244, 76, 109);
border-radius: 50%;
transition: all 1s;
z-index: 4;
box-shadow: 0 0 25px 0 rgb(244, 76, 109);
&:hover {
cursor: pointer;
}
&::before {
content: "";
margin: auto;
position: absolute;
top: 22px;
right: 0;
bottom: 0;
left: 20px;
width: 10px;
height: 2px;
background: rgb(251, 239, 239);
transform: rotate(45deg);
transition: all .6s;
}
&::after {
content: "";
margin: auto;
position: absolute;
top: -5px;
bottom: 0;
left: -5px;
right: 0;
height: 25px;
width: 25px;
border-radius: 50%;
border: 2px solid rgb(251, 240, 240);
transition: all .6s;
}
}
input {
font-family:'Courier New', Courier, monospace;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 50px;
width: 50px;
outline: none;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
background: rgb(244, 76, 109);
color: white;
text-shadow: 0 0 10px rgb(244, 76, 109);
padding: 0 80px 0 20px;
border-radius: 30px;
box-shadow: 0 0 25px 0 rgb(244, 76, 109),
0 20px 25px 0 rgba(0, 0, 0, 0.2);
transition: all 1s;
font-weight: bolder;
letter-spacing: 0.1em;
opacity: 0;
z-index: 5;
&:hover {
cursor: pointer;
}
&:focus {
width: 300px;
cursor: text;
opacity: 1;
}
&:focus ~ .search {
right: -250px;
z-index: 6;
background: #151515;
&::before {
top: 0;
left: 0;
width: 25px;
}
&::after {
top: 0;
left: 0;
height: 2px;
width: 24px;
border: none;
border-radius: 0%;
transform: rotate(-45deg);
background: white;
}
}
&::placeholder {
opacity: 0.5;
color: white;
font-weight: bolder;
}
}
}
</style>
</head>
<body>
<div class="container">
<input type="text" placeholder="Search here...">
<div class="search"></div>
</div>
</body>
</html>
Output:
Here is the result we can observe the search field, and when the search button is inactive, then it can be seen underneath:
Upon pressing the search icon, the search box will be displayed along with a cross button, as illustrated below:
Demonstration 8:
We are going to build a rectangular search bar with a search symbol in this example, and the search symbol transforms into an arrow upon hovering over it.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rectangular search bar</title>
<style>
* {
outline: none;
}
html,
body {
height: 100%;
min-height: 100%;
}
body {
margin: 0;
background-color: #f0f8be;
}
.box1 {
display: table;
width: 100%;
}
.box2 {
display: table-cell;
vertical-align: middle;
}
input,
button {
color: white;
font-family: 'Courier New', Courier, monospace;
margin: 0;
border: 0;
padding: 0;
background-color: transparent;
}
#search-box {
position: absolute;
left: 0;
top: 49%;
width: 725px;
right: 0;
border-radius: 20px;
box-shadow: 0 10px 40px #e9fd66, 0 0 0 20px white;
padding: 36px;
margin: -90px auto 0 auto;
background-color: #e9fd66;
transform: scale(0.6);
}
form {
height: 82px;
}
input[type="text"] {
height: 86px;
width: 100%;
font-size: 80px;
line-height: 1;
}
input[type="text"]::placeholder {
color: #050504;
}
#search-arrow {
width: 1px;
padding-left: 36px;
}
button {
display: block;
position: relative;
height: 86px;
width: 80px;
cursor: pointer;
}
#search-circle {
position: relative;
top: -9px;
width: 45px;
height: 45px;
left: 0;
margin-top: 0;
border-radius: 49%;
border-width: 17px;
border: 16px solid #fff;
background-color: transparent;
transition: 0.6s ease all;
}
button span {
position: absolute;
top: 70px;
height: 16px;
left: 44px;
width: 46px;
display: block;
border-radius: 9px;
background-color: transparent;
transform: rotateZ(52deg);
transition: 0.6s ease all;
}
button span:before,
button span:after {
content: "";
position: absolute;
right: 0;
bottom: 0;
height: 16px;
width: 46px;
background-color: white;
border-radius: 9px;
transform: rotateZ(0);
transition: 0.6s ease all;
}
#search-arrow:hover #search-circle {
top: -2px;
width: 70px;
height: 16px;
border-width: 0;
background-color: white;
border-radius: 20px;
}
#search-arrow:hover span {
left: 55px;
width: 24px;
top: 49%;
margin-top: -10px;
transform: rotateZ(0);
}
#search-arrow:hover button span:before {
bottom: 10px;
transform: rotateZ(52deg);
}
#search-arrow:hover button span:after {
bottom: -10px;
transform: rotateZ(-51deg);
}
#search-arrow:hover button span:before,
#search-arrow:hover button span:after {
width: 39px;
right: -5px;
background-color: #f4f4ed;
}
</style>
</head>
<body>
<div id="search-box">
<form method="get" action="">
<div class="box1">
<div class="box2">
<input type="text" placeholder="Search" required>
</div>
<div class="box2" id="search-arrow">
<button type="submit">
<div id="search-circle"></div>
<span></span>
</button>
</div>
</div>
</form>
</div>
</body>
</html>
Output:
Here in the result, we can observe the rectangular search bar.
When the search icon is hovered over, it transforms into an arrow, as demonstrated below:
Conclusion
We have comprehended the CSS styling for the search bar in this post. It is feasible to build a search bar using the <input> and <button> elements and apply CSS for customization. The process of animating the search bar using CSS has also been explained thoroughly.