Pulsante di ricerca all'interno della casella di ricerca come Bing

Question

Come posso implementare un pulsante di ricerca all'interno della casella di ricerca, come visto su un sito come Bing?

Answer 1

sembra proprio come se fosse dentro, ma non è (non si può mettere html all'interno di un ingresso).

I 2 elementi (un input e un pulsante) sono vicini insieme al margine 0 ed entrambi hanno la stessa altezza. L'immagine del pulsante ha un margine bianco di 3 pixel. Quindi crea questo effetto.

Una possibile markup e lo stile possono essere:

<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)