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;

}