带有搜索图标位置的文本框 [英] Textbox with search icon placement

问题描述

我不是很好的CSS，文本框已经对齐，我试图把搜索图标放入文本框，它只是不能进去。这是代码：

I am not very good at CSS, the textbox has been aligned to right, I tried putting the search icon into the textbox, it just can't go in. Here are the code:

<style type="text/css">
#textbox-search{overflow:auto;}

#textbox-search input.searchkeyword {
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     border:1px solid #8e8e8e;
     background-color:#f5f5f5;
     height:16px;
     padding:-4px;
     padding-left:-48px;
     color:#4a4a4a;
     float:right;
 }

#textbox-search input.button{
    border:0;
    padding:4px;
    margint:0 0 0 600px;
    width:24px;
    height:24px;
    background:transparent url('images/search.png') center center  no-repeat;
    float:right;

}
</style>

<form id="textbox-search">
<input type="submit" class="button" value="" />
<input type="text" class="searchkeyword" />
</form>

UPDATE：

推荐答案

您可以使用 / code>这样的属性

You can simply achieve this using background property like this

input{  
    background: url("http://png.findicons.com/files/icons/1389/g5_system/32/toolbar_find.png") top right no-repeat;
    height:30px;
    padding-right:30px;
}

JS Fiddle Demo

您可以根据图片尺寸更改高度和填充值。

You can change Height and padding value as per your image dimension.

这篇关于带有搜索图标位置的文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！