【问题标题】：Image button inside search field?搜索字段内的图像按钮？
【发布时间】：2011-02-03 04:34:08
【问题描述】：

我想知道像 bing.com 或 wolframalpha.com 这样的网站是如何在文本字段内创建搜索按钮的？如果你去每个网站，你可以清楚地看到我的意思。

【问题讨论】：

标签： css button textfield

【解决方案1】：

按照这个搜索框背景图片的思路格式化怎么样？

http://zenverse.net/create-a-fancy-search-box-using-css/

【讨论】：

【解决方案2】：

@dscher -

这是代码，它在 Opera 中运行良好，但在其他浏览器中没有。

提交表格{

background:transparent url(submit.png) no-repeat;
border:0 none;
width:16px;
height:16px;
overflow:hidden;
font-size:0px;
text-decoration:none;
cursor: pointer;
margin-top: 0px;
margin-left: -25px;
margin-right: 0px;
margin-bottom: 0px;
padding-top: 25px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;

}

【讨论】：

只是一个建议：这应该放回原来的帖子。您应该可以对其进行编辑，然后在该帖子存在时将其删除。
原帖是用未注册账号提交的，怕是回不去编辑了。

【解决方案3】：

简单：提交按钮（具有透明背景）在输入字段上方.. :)

【讨论】：

【解决方案4】：

将自己的 Firebug 用作 Firefox 的插件。您可以单击屏幕上的元素并查看它们的 CSS。它会教你大量关于 CSS 的信息。他们实际上使用负边距来让这个傻瓜在 Bing.com 上漂浮。

http://getfirebug.com/

【讨论】：

谢谢，这正是我所需要的。 Opera 和 Chrome（我测试过的两种浏览器）之间的定位似乎有些不同。有什么方法可以专门为浏览器指定位置？
嗯...不能具体评论。您能否将一些 CSS 粘贴到您的原始帖子中，我会看看。只需将直接区域中的选择器粘贴到搜索字段即可。