Add an awesome html search box to your web site.

In this quick guide, we’ll show you how to create an effective and stylish search box that can be used along with Keyoti’s search engine control or any other search engine you might be using.

Here's the end result. Hover over the input field and see how the search icon appears – all using CSS3 & HTML.

The HTML looks like this;

	  <div class="sb_container">
	  	  <input type="text" placeholder="Search..." id="sew_searchBox" class="search"> </input>
	  	  <button class="icon" onclick="keyotiSearchBox.doSearch()"></button>
	  </div>
					  

We have a container holding the input field along with the button, and in order to use with Keyoti's SearchUnit control we've added id="sew_SearchBox" to the input field and onclick="keyotiSearchBox.doSearch()" to the button which will initiate search when the button is clicked (search has been deactivated for this tutorial).

The containing DIV

So let's start by setting up our container that will hold the input field and button. We need to set overflow:hidden to keep the button from being displayed when it's not needed;

	  .sb_container{
	  	  overflow: hidden;
	  	  width: 300px;
	  	  vertical-align: middle;
	  	  white-space: nowrap;
	}
	

The Input field

	.sb_container input.search{ 
		  width: 280px; 
		  height: 40px; 
		  background: #207cca; 
		  border: none; 
		  font-size: 10pt; 
		  float: left; 
		  color: #fff; 
		  padding-left: 15px; 
		  -webkit-border-radius: 5px; 
		  -moz-border-radius: 5px; 
		  border-radius: 5px;
}
						

Placeholder text

Next we specify four different rules for the placeholder text;

	  .sb_container input.search::-webkit-input-placeholder { color: white;}
	  .sb_container input.search:-moz-placeholder { /* Firefox 18- */ color: white; }
	  .sb_container input.search::-moz-placeholder {  /* Firefox 19+ */ color: white; }
	  .sb_container input.search:-ms-input-placeholder {  color: white; }

						

The icon

The following code sets the styles and background image for the icon;

	.sb_container button.icon {
		  -webkit-border-top-right-radius: 5px; 
		  -webkit-border-bottom-right-radius: 5px; 
		  -moz-border-radius-topright: 5px; 
		  -moz-border-radius-bottomright: 5px; 
		  border-top-right-radius: 5px; 
		  border-bottom-right-radius: 5px; 
		  border: none; 
		  background: #f7f7f7; 
		  height: 50px; 
		  width: 50px; 
		  color: #4f5b66; 
		  opacity: 0; 
		  font-size: 10pt; 
	

managing the transition

As the button element needs to move, the following transitions have been defined

More information about CSS3 transitions

		  -webkit-transition: all .55s ease; 
		  -moz-transition: all .55s ease; 
		  -ms-transition: all .55s ease; 
		  -o-transition: all .55s ease; 
		  transition: all .55s ease;
	}

bringing in the button icon

	.sb_container:hover button.icon, .sb_container:active button.icon, .sb_container:focus button.icon{ 
		  outline: none; 
		  opacity: 1; 
		  margin-left: -50px;
		  background-image:url('/images/search-icon.png');    
		  background-repeat: no-repeat;  
		  background-position: center; 
	}

	.sb_container:hover button.icon:hover{ 
		  background: #f7f7f7;
		  background-image:url('/images/search-icon.png');    
		  background-repeat: no-repeat;background-position: center; 
	}

						

Display Search Results

For those of you using Keyoti's SearchUnit control, in order to display the search results you will need to add the results div with id 'sew_searchResultsControl' to the page, like this;

Please see the SearchUnit documentation for further details.

Conclusion

As you can see, it can be very easy to create a stylish HTML search box that will entice your visitors to search and engage more often with your website. This tutorial has only covered the simplest way to create a great HTML search box however we hope it inspires you to go further and create your own customized search bar.

If you have any questions about integration with Keyoti's SearchUnit control please don't hesitate to contact us.