botón de buscar dentro de la caja de búsqueda como Bing

Question

¿Cómo puedo implementar un botón de búsqueda en el cuadro de búsqueda, como se ve en un sitio como Bing?

Answer 1

Sólo se ve como si fuera el interior, pero no lo es (no se puede poner HTML dentro de una entrada).

Los 2 elementos (una entrada y un botón) están cerca junto con 0 margen y ambos tienen la misma altura. gráfico del botón tiene un margen blanco 3px. Por lo que crea este efecto.

Una posible Estilo y etiquetado podrían ser:

<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 fresco Bing-como cuadro de búsqueda (botón en el interior)