Create a Search Bar using HTML and CSS

To create 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. This article contains 2 sections in the first section we will attach the CDN link for icon and will make a basic structure. The second section will design the navbar and the search bar in it.

Creating Structure: In this section, we will just create the basic site structure and also attach the CDN link of the Font-Awesome for the icons which will be used as a search icon in the 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”>

  • HTML code: The HTML code is used to create a structure of navigation bar containg search bar. Since it does not contain CSS so it is just a simple structure. We will use some CSS property to make it attactive.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            Create a Search Bar using HTML and CSS
        </title>
        <meta name="viewport"
            content="width=device-width, initial-scale=1">
    </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>
              
            <!-- seach 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 style="color:green; padding-top:40px;">
                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>               

    chevron_right

    

    

    
                        filter_none
    

    

    

    

    

    • 



Designing Structure: In the previous section, we created the structure of the basic site where we are going to use the Navigation bar with the search bar with the icon. We will design the structure and attach the icons for each navbar.


    

  • CSS code: CSS code is used to make the attractive website. This CSS property is used to make the style on navigation bar containing search bar .

    

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <style> 
    

              
    

        /* 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; 
    

        }  
    

    </style> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    

    • 



Combining HTML and CSS Code: This is the final code that is the combination of the above two sections. It will be displaying the navigation bar containing search bar.











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!DOCTYPE html> 


<html> 


  


<head> 


    <title> 


        Create a Search Bar using HTML and CSS 


    </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"> 


  


    <style> 


          


        /* 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; 


        }  


    </style> 


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


          


        <!-- seach 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 style="color:green; padding-top:40px;"> 


            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>                  



















                        chevron_right







                        filter_none








Output:





          
          
          

          

    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
Sabya_Samadder
Check out this Author's contributed articles.
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.