How to Create a Search Bar using HTML and CSS
Creating a search bar in HTML and CSS is simple and essential for enhancing user experience on your website. A search bar allows users to quickly find specific content, making it a common feature in website navigation menus. In this guide, we'll show you how to create a search bar in HTML.
By following the steps below, you'll learn how to make a search bar in HTML that's both functional and visually appealing. Whether you're looking to add a search box for a website or integrate a stylish search bar for your website using HTML and CSS.
Approach
To create a functional and attractive search bar, we’ll break the task into two parts:
HTML Setup
- Start with a basic HTML document and include a
<meta>tag for responsive design. - Create a navigation bar (
navlist) containing menu links like Home, Our Products, Careers, About Us, and Contact Us. - Add a search form inside a right-aligned
<div>containing:- A text input field with placeholder text (e.g., “Search Courses”)
- A search button with a search icon (using Font Awesome)
CSS Styling
- Use Flexbox to arrange navigation links and the search bar.
- Style the search input and button with padding, borders, hover effects, and responsive behavior.
- Design a content section featuring the GeeksforGeeks logo, tagline, and a short description to reinforce branding and purpose.
Example: The code example shows the implementation of the above-explained approach.
<!DOCTYPE html>
<html>
<head>
<title>Search Bar</title>
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="./style.css">
</head>
<body>
<!-- Navbar items -->
<div id="navlist">
<a href="#">Home</a>
<a href="#">Our Products</a>
<a href="#">Careers</a>
<a href="#">About Us</a>
<a href="#">Contact Us</a>
<!-- search bar right align -->
<div class="search">
<form action="#">
<input type="text" placeholder="Search Courses"
name="search">
<button>
<i class="fa fa-search"></i>
</button>
</form>
</div>
</div>
<!-- logo with tag -->
<div class="content">
<h1>GeeksforGeeks</h1>
<b>A Computer Science Portal for Geeks</b>
<p>
How many times were you frustrated while
looking out for a good collection of
programming/algorithm/interview questions?
What did you expect and what did you get?
This portal has been created to provide
well written, well thought and well
explained solutions for selected questions.
</p>
</div>
</body>
</html>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
#navlist {
background-color: green;
overflow: hidden;
padding: 10px 0;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
#navlist a {
color: white;
padding: 14px 20px;
text-decoration: none;
text-align: center;
}
#navlist a:hover {
background-color: darkgreen;
color: white;
}
.search {
flex-grow: 1;
display: flex;
justify-content: flex-end;
align-items: center;
}
.search input[type="text"] {
padding: 6px;
margin-right: 10px;
border: none;
font-size: 17px;
border-radius: 4px;
}
.search button {
padding: 6px 10px;
background: white;
color: green;
border: none;
cursor: pointer;
border-radius: 4px;
}
.search button i {
font-size: 18px;
}
.search button:hover {
background: darkgreen;
color: white;
}
/* Logo and tag styling */
.content {
text-align: center;
margin-top: 20px;
}
.content h1 {
color: green;
}
/* Responsive styling */
@media screen and (max-width: 600px) {
#navlist {
flex-direction: column;
align-items: flex-start;
}
.search {
justify-content: flex-start;
width: 100%;
margin-top: 10px;
padding-left: 10px;
}
.search input[type="text"] {
margin-right: 10px;
width: auto;
}
.search button {
padding: 4px 8px;
}
.search button i {
font-size: 14px;
}
#navlist a {
width: 100%;
text-align: left;
padding: 10px 20px;
}
}
Output:
You’ve now created a stylish, responsive, and accessible search bar using HTML and CSS! This design is lightweight, easy to customize, and ready to enhance any website’s navigation. Experiment with different styles and test it thoroughly to ensure a seamless user experience.
