Custom TextField (Usually Use As Search TextField)

Currently i am learning how to design a webpage. I just created a custom textfield which people usually use as search textfield.

First of all we need to set the css

.custom-texfield-container{
background:url(img/search.gif); /* the image */
width: 150px; /* width of the custom-texfield-container */
height:40px; /* height of the custom-texfield-container */
margin:0; /* don't change this */
}

/* set the padding to fit the image */
.custom-texfield-container div{
margin-top:-3px;/* use to fit for all browsers */
padding-top:11px;
padding-right:19px;
padding-left:20px;
}

.custom-texfield-container div input{
width:110px;
height:15px;
border-top:0px;
border-bottom:0px;
border-left:0px;
border-right:0px;
}

Then put this in the body tag



Here is the image


Result Page

Let's Discuss it..
Comment or suggestion will be thankful..