Just want to give you some inspiration...
View Sample or Download in 1 ZIP file
You can also see how to create icon in this input box on our blog - How to Create an effective Search VISTA Icon
About code
CSS attribute for radius (“-moz-border-radius-…”) works
only in Firefox, all other elements should be cross-browser compatible. It’s
very easy to do.
All we need is 1 html tag:
<input
type="text"/>
and css:
input
{ background: url(search.png) #ffffff
no-repeat left center;
border: 3px solid #EEEEEE;
color: #808080;
font-weight: bold;
font-family: "Lucida
Grande" ,Verdana,sans-serif;
height: 24px;
padding-left: 30px;
padding-top:6px;
width: 300px;
font-size: 1em;
vertical-align: middle;
text-decoration: none;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
}
input:hover
{
border: #d3d3d3 3px solid;
}