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;
}