custom search bar

How to create custom search bar using HTML and CSS

Rate this article

Share this article
Share on facebook
Share on twitter
Share on linkedin
Share on email

In this article, we will see how to create a custom search bar using HTML and CSS. The custom search bar will look like this. If you are not into coding, you can add the following search for sites that make it easy to integrate site search in your website.

Steps to add HTML custom search

  1. Add custom search HTML- 
    <body>
      <form class="search-container">
        <input type="text" id="search-bar" placeholder="What can I help you with today?">
        <a href="#"><img class="search-icon" src="https://blog.expertrec.com/search-icon-1/"></a>
      </form>
    </body>

     

  2. Add custom search CSS-
      body{
        padding-top: 75px;
      }
    
      .search-container{
        width: 490px;
        display: block;
        margin: 0 auto;
      }
    
      input#search-bar{
        margin: 0 auto;
        width: 100%;
        height: 45px;
        padding: 0 20px;
        font-size: 0.75rem;
        border: 1px solid orange;
        outline: none;
        &:focus{
          border: 1px solid #008ABF;
          transition: 0.35s ease;
          color: #008ABF;
          &::-webkit-input-placeholder{
            transition: opacity 0.45s ease; 
            opacity: 0;
           }
          &::-moz-placeholder {
            transition: opacity 0.45s ease; 
            opacity: 0;
           }
          &:-ms-placeholder {
           transition: opacity 0.45s ease; 
           opacity: 0;
           }    
         }
       }
    
      .search-icon{
        position: relative;
        float: right;
        width: 75px;
        height: 75px;
        top: -62px;
        right: -45px;
      }
    
    
    
    

     

The above code, adds just a search box. (meaning you cant search using it). Create your custom search bar, go here.custom search bar

Add Custom Search to your Website

0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published.

Hold on!
We’ve gathered our industry knowledge and are sharing hacks, tips to increase e-commerce revenue. Contains best tips for scaling up your ecommerce business.