creating customized search box

I am trying to create a customized search box. I tried the following but getting weird results.

this is my css code

.inputboxSearch {
margin: 0 0 1em 0;
border: 1px solid #333333;
background:url('images/searchbox.png') no-repeat; 
padding-right:20px;
}

where, searchbox.png is a full a image (180*30 png) of a searchbox. Then i have tghe following code.

<input class="inputboxSearch" type='text' name='search' size='25'/>

But, how it appears is tha开发者_如何学Got, the search box image comes inside of the input box, and it is only half displayed. Rest is not visible. But wat i expected was, the search box should encompass the input box. The revers is happening here anyways. How to solve this

Set .inputboxSearch border to none, and increase its height to 30px:

.inputboxSearch {
    background: url("images/searchbox.png") no-repeat scroll 0 0 transparent;
    border: none;
    height: 30px;
    margin: 0 0 1em;
    padding-right: 20px;
}