搜索框内嵌搜索按钮，类似必应。

Question

我如何在搜索框内实现搜索按钮，就像Bing这样的网站一样?

- vikmalhotra

Answer 1

看起来像是里面，但实际上不是（你不能在输入框内放置HTML）。

这两个元素（一个输入框和一个按钮）彼此靠近，没有边距，并且它们的高度相同。按钮的图形有一个3像素的白色边缘，因此创建了这种效果。

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

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

- cherouvim

---

顺便提一下：您可以使用相对或绝对定位将按钮放在搜索栏的顶部。 - chacham15

Answer 2

一个很酷的类似Bing的搜索框（按钮在内部）

- Sarfraz