在文本框中显示搜索图片

Question

您可能以前看过很多漂亮的搜索框（如jQuery API中的那些框），其中有一个可点击的搜索图标显示在文本框上。我如何在语义上实现这种效果？

我在一些自定义的Google搜索文本框中看到它在文本框中使用背景图像，然后它接收焦点并删除图像。此外，StackOverflow中的搜索框似乎也使用了一个小图标的背景图片。我知道如何做到这一点，这很容易，但这不是我想要的效果。我希望有一个可点击的图标，在点击时悬停并提交表单。

Answer 1

使用一些与此类似的HTML（其中......表示放入表单所需的适当属性）：

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

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

如果您想要更紧密地模拟jQuery的解决方案，我建议您安装Firebug for Firefox并自行检查元素的HTML和CSS。

Answer 2

将链接标签绝对放置在文本框的右侧，并使用透明的PNG背景进行设计。将代码附加到链接的点击事件中以查找并提交表单。如果你正在使用像jQuery这样的第三方Javascript库，那么这很平凡。

Answer 3

另一种方式来完成，这是放置一个相对定位提交的搜索输入（用搜索输入框填充顶部的按钮，以保持文本从搜索图像下运行。然后给你的按钮悬停状态，此时您都是很好的去。

Answer 4

您可以皮肤提交使用CSS的形式和位置的按钮。这是一个有点棘手，你得到它的工作在所有的浏览器，但它有可能..

Answer 5

此链接可能对您有所帮助。它有完整的代码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; 
}