Create a Search Bar using HTML and CSS

Creating a search bar using HTML and CSS is easy. A search bar is a common component found in navigation menus, allowing users to search for specific content within a website. By following the steps below, you’ll be able to add a functional and visually attractive search bar to your web pages.

CDN links for the Icons from the Font Awesome:

<link rel="stylesheet"

href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Preview:

Output

Approach

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.
Apply styling to the search bar elements using CSS, adjusting colors, padding, and font size for visual appeal.
Include a content section with the GeeksforGeeks logo, a tagline, and a brief description of the portal's purpose and offerings.

Set Up an HTML and CSS Document

The implementation of search Bar with an HTML document.

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" style="font-size: 18px;"></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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* styling navlist */
#navlist {
    background-color: #0074D9;
    position: absolute;
    width: 100%;
}

/* styling navlist anchor element */
#navlist a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-size: 15px;
}

.navlist-right {
    float: right;
}

/* hover effect of navlist anchor element */
#navlist a:hover {
    background-color: #ddd;
    color: black;
}

/* styling search bar */
.search input[type=text] {
    width: 300px;
    height: 25px;
    border-radius: 25px;
    border: none;
}

.search {
    float: right;
    margin: 7px;
}

.search button {
    background-color: #0074D9;
    color: #f2f2f2;
    float: right;
    padding: 5px 10px;
    margin-right: 16px;
    font-size: 12px;
    border: none;
    cursor: pointer;
}

/* styling logo and tag */
.content {
    padding-top: 40px;
}

.content h1 {
    color: green;
}

Output:

HTML and CSS both are foundation of webpages. HTML is used for webpage development by structuring websites, web apps and CSS used for styling websites and webapps. You can learn more about HTML and CSS from the links given below:

HTML Tutorial and HTML Examples
CSS Tutorial and CSS Examples

Article Tags :

HTML

Web Technologies

HTML-Misc