CSS Search Box
Search box is a very common component for all web sites now a days. From Commercial sites such as merchandise or product based to simple blog sites, search plays a very crucial role.
In HTML, the Search is generally denoted by a form, textbox and a button.
But as the design of web pages changed from boring html color only designs to a rich image based design, search box also needs to be customized. The following tutorial will tell us how to create a custom searchbox using CSS.
First let us write the code for HTML -
<form action="">
<input id="search" onfocus="if(this.value == "Search") {this.value = "";}" onblur="if (this.value == "") {this.value = "Search";}" size="20" type="text" value="Search" />
<input class="black-button" type="button" value="Go" />
</form>
<input id="search" onfocus="if(this.value == "Search") {this.value = "";}" onblur="if (this.value == "") {this.value = "Search";}" size="20" type="text" value="Search" />
<input class="black-button" type="button" value="Go" />
</form>
Now let us write the CSS code for this. To make a modern searchbox, we will need a gradient image and a search icon.
Some free search icon can be downloaded from -
Link
Select a search icon of 16 X 16 pixels.
Now it is time to write the css code.
#search{
background:url('../images/search_icon.png') no-repeat;
border:1px solid #ccc;
padding-left:16px;
height:22px;
background-position:2px 2px;
text-align:left;
background-color:#fff;
vertical-align:top;
color:#666;
}
background:url('../images/search_icon.png') no-repeat;
border:1px solid #ccc;
padding-left:16px;
height:22px;
background-position:2px 2px;
text-align:left;
background-color:#fff;
vertical-align:top;
color:#666;
}
An Image can be used to represent the search button instead of the input.
Posted by admin in HTML Elements on Monday, August 24, 2009
