How to create a dropdown searchbox using css

A quick tip on how to create a search box which opens on click or hover.

Steps :

  1. Create a search button with an image
  2. Create a search box using Form and position it below the search button using relative position and float(if required).
  3. Create a small arrow using :after pseudo element.

    .search-container:after {
      position: absolute;
      right: 30px;
      content: " ";
      border-top: 9px solid transparent;
      border-bottom: 9px solid #aec400;
      border-left: 9px solid transparent;
      border-right: 9px solid transparent;
      margin-top: -18px;
    }
    

    Read more about :after pseudo element here

  4. Hide search box using display : none
  5. Show search box on click event using display:block
  6. Toggle display based on its current status

Here’s some sample code using Jquery. The same can be achieved using pure Javascript with 2 extra lines of code.

The same effect but on hover can be achieved using pure css by setting display:block on :hover of search button.

See the Pen dropdown-searchbox by Ranjith (@Ranjithkumar10) on CodePen.23550

Author: Ranjith kumar

A CA student by education, self taught coder by passion, loves to explore new technologies and believes in learn by doing.

Leave a Reply

Your email address will not be published. Required fields are marked *