搜索框中的搜索按钮像bing

Question

如何在搜索框内实现搜索按钮，如Bing这样的网站上所示？

Answer 1

它看起来像在内部，但不是（您不能将HTML放入输入中）。

这两个元素（输入和一个按钮）与0边距在一起，两者都具有相同的高度。该按钮的图形具有3PX白色边距。因此，它创造了这种效果。

可能的标记和样式可能是：

<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 ... */
}

Answer 2

一个凉爽的bing状搜索框（内部按钮）