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 si è visto su un sito come Bing?

Answer 1

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

Gli elementi 2 (un ingresso e un pulsante) sono ravvicinati con 0 margine ed entrambi hanno la stessa altezza. grafica del pulsante ha un margine bianco 3px. Così si crea questo effetto.

Una possibile markup e lo stile potrebbe 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

un luogo fresco Bing-come casella di ricerca (pulsante on the Inside)