[英]Stop placeholder / input text from overlapping background image used as icon?
I'm creating a search input and am using a backimage css as the search icon. 我正在创建一个搜索输入,并使用backimage css作为搜索图标。
However this causes the placeholder and content to overlap the backimage on the left. 但是,这会导致占位符和内容与左侧的背景重叠。
Is there a way I can make the text inside the div start from the after the background image icon? 有没有办法让div里面的文字从背景图片图标开始? If you put in a longish search, and then unfocus the input you will see it overlap.
如果您进行了长时间的搜索,然后对输入进行疏散,您将看到它重叠。
jsfiddle: 的jsfiddle:
http://jsfiddle.net/ET4e7/ http://jsfiddle.net/ET4e7/
Code: 码:
<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;
}
*Note, haven't decided on a max char length yet. *注意,尚未确定最大字符长度。
You just need to add padding-left: 20px;
你只需要添加
padding-left: 20px;
to the input (or however large the icon actually is): 到输入(或实际上图标的大小):
#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; /* <-------------------------------------------------------- */
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.