Open In App
Related Articles

Create a Search Bar using HTML and CSS

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

Creating a search bar in the navigation bar is easy, just like creating another option in the navbar that will search the database. You need to be careful about the timing of placing the search bar. Make sure separately placed in the navbar. To create a navbar containing a search bar you will need HTML and CSS. The below explanation will guide you stepwise on how to create a search bar.

  • 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:

searchbar

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.

Example: 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=
    <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:



Last Updated : 17 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads