Bing搜索框內的搜索按鈕

Question

如何在像Bing這樣的網站上看到的搜索框內實現搜索按鈕？

Answer 1

它只是看起來像它的裏面，但它不是（你不能把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 ... */ 
} 

Answer 2

A Cool Bing-like Search Box (Button on the Inside)