搜索框中的搜索按钮像Bing [英] Search button inside the search box like Bing

问题描述

如何在搜索框中实现搜索按钮，如Bing等网站上所示？

How can I implement a search button inside the search box, as seen on a site like Bing?

推荐答案

这两个元素（一个输入和一个按钮）与0边距接近，并且都具有相同的高度。按钮的图形有一个3px的白边。

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.

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

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

这篇关于搜索框中的搜索按钮像Bing的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！