创建定制的搜索框

问题描述

| 我正在尝试创建自定义的搜索框。我尝试了以下方法，但得到了奇怪的结果。 这是我的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\'/>

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

解决方法

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