Home Lists+

TextBox with Search Icon in HTML and CSS, Your Instant Search Box Design

Search boxes are a common requirement in almost every website you’ll create. It is very useful when users want to find certain data, it may have auto complete functions for assisting users to search. But it this post I’ll guide you on how to create an input box or TextBox with search icon in HTML and CSS.

Recently I was asked to create this search box with a style that looks like the YouTube search box. Although not exactly the same as YouTube, I still made it with the same style. This can be useful for you too if you want a search box with decent style instantly.

TextBox with Search Icon in HTML and CSS

Step by Step HTML and CSS Search Box Guide

Step 1: Create the index.html with its basic structure.

<!doctype html>
<html>
    <head>
        <title>TextBox with Search Icon in HTML and CSS - Tutorial from www.codeofaninja.com</title>
    </head>
<body>
  
</body>
</html>

Step 2. Add the input box inside the tag.

Also include the placeholder saying “Search…” and an ID of “search-text-input”.

<input type='text' placeholder='Search...' id='search-text-input' />

Step 3: Download a search icon.

Since we want to have a search box with search icon, download a magnifying glass icons which is a standard icon for search. It must be a transparent PNG icon. Size depends on what you need but in this example we have a 32 x 32 px icon. Put in in the same directory as the index.html.

Step 4: Add a div with the image icon inside.

The “div” tag should have an ID of “button-holder”. My magnifying glass icons was named magnifying_glass.png.

<div id='button-holder'>
    <img src='magnifying_glass.png' />
</div>

Step 5: Add the magical CSS

We have three elements with IDs that we should style. Again, you can play or experiment with the CSS to suite your visual needs. I put the code below inside the “head” tag, after the “title” tag.

<style>
#search-text-input{
	border-top:thin solid  #e5e5e5;
	border-right:thin solid #e5e5e5;
	border-bottom:0;
	border-left:thin solid  #e5e5e5;
	box-shadow:0px 1px 1px 1px #e5e5e5;
	float:left;
	height:17px;
	margin:.8em 0 0 .5em; 
	outline:0;
	padding:.4em 0 .4em .6em; 
	width:183px; 
}
 
#button-holder{
	background-color:#f1f1f1;
	border-top:thin solid #e5e5e5;
	box-shadow:1px 1px 1px 1px #e5e5e5;
	cursor:pointer;
	float:left;
	height:27px;
	margin:11px 0 0 0;
	text-align:center;
	width:50px;
}
 
#button-holder img{
	margin:4px;
	width:20px; 
}
</style>

Download Source Code Examples

The source code of this tutorial is part of our 30+ useful jQuery and PHP source code package. Each item in the package has its own tutorial like the one above.

If you are just starting out to learn web programming and serious about learning more, this is the right package for you. Click green button below to see the what is included in the package and download it there.


Online Resources

You can also use the following resources for other techniques in doing this task.

How do I create a search button within a textbox?
search icon inside search box
TextBox with Search icon as background image

If you made other TextBox with search icon in HTML and CSS, please let us see it by dropping the demo link on the comments section below, we love to see your own creations! Thanks for visiting and take care. :)