Question

您之前可能已经看过花哨的搜索框（就像jQuery API上的那个），他们在文本框上显示了可点击的搜索图标。我怎样才能在语义上达到这种效果呢？

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

Answer 1

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

Answer 2

使用与此类似的HTML（其中......表示放入表单所需的相应属性）：

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

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

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

Answer 3

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

Answer 4

另一种实现此目的的方法是在搜索输入的顶部放置一个相对定位的提交按钮（在搜索输入上添加填充以防止文本在搜索图像下运行。然后让按钮处于悬停状态，你就是一切都好。

Answer 5

您可以为表单的提交按钮设置外观并使用css进行定位。要让它在所有浏览器上运行有点棘手，但它有可能......

在文本框中显示搜索图像

5 个答案: