CSS 搜索框内的搜索按钮，如 Bing
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3581824/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Search button inside the search box like Bing
提问by vikmalhotra
How can I implement a search button inside the search box, as seen on a site like Bing?
如何在搜索框中实现搜索按钮，如 Bing 等网站上所见？
回答by cherouvim
It just looks like it's inside but it's not (you cannot put html inside an input).
它看起来像是在里面，但实际上不是（您不能将 html 放入输入中）。
The 2 elements (an input and a button) are close together with 0 margin and both have the same height. The button's graphic has a 3px white margin. So it creates this effect.
这 2 个元素（一个输入和一个按钮）靠 0 边距靠得很近，并且都具有相同的高度。按钮的图形有一个 3px 的白色边距。所以它创造了这种效果。
A possible markup and styling could be:
可能的标记和样式可能是：
<input type="text" id="q" />
<input type="button" id="b" value="Search" />
#q, #b {
margin: 0
}
#q {
padding: 5px;
font-size: 2em;
line-height: 30px
}
#b {
/* image replacement */
text-indent: -99999px;
width: 30px;
height: 30px;
display: block;
background: gray url(button.png) 0 0 no-repeat;
/* placing next to input using float or absolute positioning omitted ... */
}
