Botón de búsqueda dentro del cuadro de búsqueda como Bing

Question

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

Answer 1

que 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 muy juntos con un margen de 0 y ambos tienen la misma altura. El gráfico del botón tiene un margen blanco de 3 píxeles. Entonces 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

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