11

如何在搜索框中实现搜索按钮,如 Bing 之类的网站上所见?

带有按钮图形的搜索框

4

2 回答 2

26

它看起来像是在里面,但实际上不是(您不能将 html 放入输入中)。

2 个元素(一个输入和一个按钮)以 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 ... */
}
于 2010-08-27T06:24:35.267 回答
3

酷酷的 Bing 式搜索框(内部按钮)

替代文字

于 2010-08-27T06:26:02.660 回答