显示搜寻图片在文本框(Show Search Image over a Textbox)

你可能见过看中搜索框之前（比如一个在jQuery的API ），他们有出现在文本框可点击搜索图标。我怎样才能在语义上达到这种效果？

我看到的是它的文本框使用的背景图像一些自定义谷歌搜索文本框，然后在接收焦点并删除图像。此外，这里在计算器上的搜索框，似乎也可以用一点点搜索图标的背景图像。我知道该怎么做，这是很容易的，但它不是真正的我想要的效果。我想有一个可点击的图标上悬停亮起，点击时提交表单。

Answer 1:

使用一些HTML与此类似（其中...放在你需要为你的表单中的相应属性单元）。

<form id="search" ...>
    <input type="text" ...>
    <button></button>
</form>

然后用CSS，设置position: relative所述上form元素和position: absolute; right: 0 position: absolute; right: 0上的按钮。按钮设置背景图像，并使用text-indent: -9999em隐藏按钮的文本关闭屏幕。

如果你想更仔细地模仿jQuery的解决方案，我建议为Firefox安装Firebug的和检查元素的HTML和CSS自己。

Answer 2:

此链接可以帮助你。它有完整的代码http://www.cssportal.com/form-elements/text-box.htm

DEMO

HTML

<form id="search">
    <input type="text" class="text"/>
    <input type="button" class="possition"/>    
</form>

CSS

body{
    position:relative;
}
.possition
{
    position:relative;
    background:url('http://s9.postimg.org/6upsdsf97/Red_Button1.gif') no-repeat center center;
    width:20px;
    height:20px;
    border:none;
    margin-left:-25px;
    top:3px;
    z-index:999;
}
.text
{
    padding-right:22px;
}