Create a Search Bar using HTML and CSS

Last Updated : 08 Oct, 2024

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

HTML Code for the Search Bar: Set up an HTML document with a title for creating a search bar, including a viewport meta tag for responsiveness.
Create a navigation bar (“navlist”) with links like Home, Our Products, Careers, About Us, and Contact Us.
Embed a search bar within a div aligned to the right, containing an input field for course search and a search button with an associated search icon.
CSS for Styling: Next, style the HTML search bar with CSS to ensure it’s visually appealing and fits the design of your website.
Include a content section with the GeeksforGeeks logo, a tagline, and a brief description of the portal’s purpose and offerings.

Example: The code example shows the implementation of the above-explained approach.

html

<!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>

CSS

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;
    }
}