从用作图标的重叠背景图像中停止占位符/输入文本?

时间:2014-03-27 00:20:02

标签: html css forms search input

我正在创建搜索输入,并使用backimage css作为搜索图标。

然而,这会导致占位符和内容与左侧的背景重叠。

有没有办法让div里面的文字从背景图片图标开始?如果你进行了长时间的搜索,然后对输入进行疏散,你会看到它重叠。

的jsfiddle:

http://jsfiddle.net/ET4e7/

代码:

<form class="searchform" action="search.php?" method="get">
  <input type="text" id="filtersearch" name="st" placeholder="search..." />
</form>

#filtersearch {
 width: 100px;
 padding-right: 5px;
 border-radius: 0px;
 border:none;
 background-color: #555;
 color:#fff;
 font-size: 15px;
 float:left;
 text-align: center;
 Display: table;
 margin-left: 0%;
 height: 100%;
 margin-top: 0px;
 -webkit-appearance: none;
 background-image: url('http://buildsanctuary.com/images/icons/searchicon.png');
 background-repeat: no-repeat;
}

#filtersearch:focus {
 text-align: center;
 width: 100%;
 outline: none;
 background-color: #555;
 -webkit-transition: width 200ms;
 -moz-transition: width 200ms;
 -o-transition: width 200ms;
 -ms-transition: width 200ms;
 transition: width 0.25;
 display: block;
}

.searchform {
 width: 200px; 
 float:left; 
 height: 35px;
}

*注意,尚未确定最大字符长度。

1 个答案:

答案 0 :(得分:2)

您只需要在输入中添加padding-left: 20px;(或实际上图标的大小):

#filtersearch {
    width: 100px;
    padding-right: 5px;
    border-radius: 0px;
    border:none;
    background-color: #555;
    color:#fff;
    font-size: 15px;
    float:left;
    text-align: center;
    Display: table;
    margin-left: 0%;
    height: 100%;
    margin-top: 0px;
    -webkit-appearance: none;
    background-image: url('http://placehold.it/20x37');
    background-repeat: no-repeat;
    padding-left: 20px; /* <-------------------------------------------------------- */
}

小提琴 Fiddle