How to Open Search Box OnClick with CSS

This tutorial helps you to build a toggle search bar that opens OnClick the button. By default,t the text field will stay hidden and reveal when the user clicks on an input button.

In other words, it works just like a dropdown where users click to see additional menu items. In our case, we will make it happen to open a search form.

It is a responsive and customizable search box which you can implement with or without navigation. In the demo, I have prepared it with the navigation bar.

Just to mention here, it’s not an animated search bar, it’s a simple search box that operates with a toggle search icon. You can check out our previous tutorial about creating an animated search box with jQuery which also works with a navigation bar.

The design is simple and clean which enhances the user experience and gets rid of the boring looking search bar.

How to Create Search Box That Open OnClick

Let’s start with creating the HTML markup for Onclick Search Box. We have a div navbar that has to define the navigation links. To keep the markup simple, I did simply added the search form and a button to the last menu item.

Additionally, I place the search form and button HTML code inside a div “togglesearch”. This div will stay hidden and only show when a search button clicked.

I’m including the Font Awesome Webfont library to create a scalable magnifying glass icon.

<div class="navbar">
  <ul>
    <li>home</li>
    <li>work</li>
    <li>projects</li>
    <li>about</li>
    <li>contact</li>
    <li class="searchbar">
        <i class="fa fa-search" aria-hidden="true"></i>
         <div class="togglesearch">
            <input type="text" placeholder=""/>
            <input type="button" value="Search"/>
        </div>
    </li>
  </ul>
</div>

The Style

Our next part is styling. I will apply CSS to design the navigation bar. If you don’t want to implement it on your website or you have already a navigation bar then you don’t need to add the following CSS.

.navbar {
    width: 100%;
    background: #46315b;
    display: inline-block;
    padding: 10px;
}
.navbar ul{
  list-style: none;
  margin: 0 auto;
  padding:0;
}

.navbar ul li{
  color: #fff;
  float: left;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  font-weight: 900;
  text-transform: uppercase;
  font-family: Arial;
  transition: 0.5s;
  position: relative;
  padding:0 20px;
}

.navbar ul li:nth-child(6){
  background: #D80B15;
}

.navbar ul li:hover:not(.active){
  background: #D80B15;
}

Now the most important part of the CSS is to create the functionality of the Search box.

.togglesearch{
  background: #E8E8E4;
  position: absolute;
  top: 54px;
  right: 28.7%;
  width: 350px;
  height: 60px;
  line-height: 60px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  border-top:4px solid #D80B15;
  display: none;
}

.togglesearch:before{
  content: "";
  position: absolute;
  top: -32px;
  right: 13px;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 14px solid transparent;
  border-bottom: 14px solid #D80B15;
}

.togglesearch input[type="text"]{
  width: 200px;
  padding: 5px 10px;
  margin-left: 23px;
  border: 1px solid #D80B15;
  outline: none;
}

.togglesearch input[type="button"]{
  width: 80px;
  padding: 5px 0;
  background: #D80B15;
  color: #fff;
  margin-left: -6px;
  border: 1px solid #D80B15;
  outline: none;
  cursor: pointer;
}

lastly, we need a little CSS for responsive design.

@media only screen and (min-width:240px) and (max-width: 768px){
    .navbar ul li{
        float:none;
        display:block;
        text-align:center;
        margin:0 auto;
    }
}

The Javascript

To handle the toggle function, we need to take a little help from Javascript toggle function. Let’s initialize the jQuery by using the document ready function and use the click function for search icons.

To open the div when click, we will use the toggle function.

$(document).ready(function() {

	$(".fa-search").click(function() {
	   $(".togglesearch").toggle();
	   $("input[type='text']").focus();
	 });

});

That’s it. We are done with creating a search form which shows when you click on a button.