Search Icon Click Open Search Box Using CSS

A search box is one of the most used elements on a web page while browsing. Generally, a search box is located inside the navbar of most websites. But, if a navbar has limited space where should the search box will be? Well! in this situation, we place only a search icon and open the search box when users click on this icon.

Before going into the code, let’s know what the logic behind this search box. Basically, this is an overlay style search form that users can open and close by clicking on the search icon. The overlay block is styled using CSS and the click function is handle in jQuery. I used Font Awesome icons for the search and close button. You can test this search form on the demo page.

HTML Structure

First of all load the Font Awesome CSS into the head section of your HTML document.

<!-- Font Awesome CSS -->
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>

Now create a search iconic button with a unique id that will be used to display the search form. You can place it anywhere on your webpage i.e in the navbar.

<i id="search-btn" class="fa fa-search fa-2x"></i>

Now, create a div element with a class name “block” and search-overlay id. Likewise, place another div with the class name centered and create an HTML form for the search box inside it. A complete HTML structure for search form overlay is as follows:

<div id="search-overlay" class="block">
  <div class="centered">
    <div id='search-box'>
      <i id="close-btn" class="fa fa-times fa-2x"></i>
      <form action='/search' id='search-form' method='get' target='_top'>
        <input id='search-text' name='q' placeholder='Search' type='text' />
        <button id='search-button' type='submit'>                     
<span>Search</span>
</button>
      </form>
    </div>
  </div>
</div>

You can also add any extra element (like your site logo) inside the overlay container. Anyhow, you’ll need to write some additional CSS to adjust extra elements.

The CSS Styles

Style the search button. Keep its position absolute and adjust it according to its parent element where you wanted to place this search icon. Similarly, define its background, padding, and border-radius properties.

#search-btn{
  position: absolute;
  top: 1em;
  right: 1em; 
  background-color: rgba(0,0,0,0.8);
  padding: 10px;
  border-radius: 2px;
  color: #FFF;
}
#search-btn:hover{
  background-color: rgba(0,0,0,0.5);
  cursor: pointer;
}

After that, define the CSS styles for overlay block. Keep its position fixed and overflow auto. Keep top, right, bottom, and left values 0 in order to fit it in the center of the webpage. Also, define a transparent background color using RGBA color for background property.

.block {
  position: fixed;
  top: 0;
  right: 0;
  bottom:0 ;
  left: 0;
  overflow: auto;
  text-align: center;
  background: rgba(0, 0, 0, 0.9);
  margin: 0;
}

.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: 0;
  /* Adjusts for spacing */
  /* For visualization 
  background: #808080; width: 5px;
  */
}

Define some styles for the centered class to adjust the search form in the center of the overlay block.

.centered {
  display: inline-block;
  vertical-align: middle;
  width: 50%;
  padding: 10px 15px;
  color: #FFF;
  border: none;
  background: transparent;
}

Create CSS styles for search form as follows:

#search-box {
  position: relative;
  width: 100%;
  margin: 0;
}

#search-form {
  height: 4.1em;
  border: 1px solid #999;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  background-color: #fff;
  overflow: hidden;
}

#search-text {
  font-size: 14px;
  color: #ddd;
  border-width: 0;
  background: transparent;
}

Search form input styles.

#search-box input[type="text"] {
  width: 90%;
  padding: 20px;
  color: #333;
  outline: none;
  font-size: 1.4em;
}

You need to keep the search button position as absolute and top right value 0 respectively. The other values like height, width, font-size, etc can be defined according to your needs.

#search-button {
  position: absolute;
  top: 0;
  right: 0;
  height: 4.7em;
  width: 100px;
  font-size: 14px;
  color: #fff;
  text-align: center;
  line-height: 42px;
  border-width: 0;
  background-color: #4d90fe;
  -webkit-border-radius: 0 2px 2px 0;
  -moz-border-radius: 0 2px 2px 0;
  border-radius: 0 2px 2px 0;
  cursor: pointer;
}

Define CSS styles for the close button that will be used to close the overlay. Keep its fixed position and set up the top right value. You can also adjust it to the left of the page by defining the left value.

#close-btn{
  position: fixed;
  top: 1em;
  right: 1em;
}
#close-btn:hover{
  color: #777;
  cursor: pointer;
}

Finally, hide the overlay block using the CSS display property and we’ll reveal it on search click in the next step.

#search-overlay{
  display:none;
}

Click Function to Open Search Box

In order to display search overlay on click, we’ll attach a click function to the search-btn selector using jQuery. So, load the jQuery JavaScript library by adding the following CDN link just before the closing of the body tag of your HTML document.

<!-- jQuery -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

Now, add the following jQuery click function to reveal the search box inside the script tag.

$(document).ready(function () {
	$('#close-btn').click(function () {
		$('#search-overlay').fadeOut();
		$('#search-btn').show();
	});
	$('#search-btn').click(function () {
		$(this).hide();
		$('#search-overlay').fadeIn();
	});
});

All done! I hope you have successfully implemented this search box that users can open on icon click. If you need further help related to this overlay search form let me know by comment below.