创建自定义搜索框

Question

我正在尝试创建自定义搜索框。我尝试了以下但得到了奇怪的结果。

这是我的css代码

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

其中，searchbox.png是搜索框的完整图像（180 * 30 png）。然后我有以下代码。

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

但是，看起来如何，搜索框图像进入输入框内部，只显示了一半。休息是不可见的。但是我想到的是，搜索框应该包含输入框。无论如何，这种逆转正在发生。如何解决这个问题

Answer 1

将.inputboxSearch边框设置为none，并将其高度增加到30px：

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