Bouton Rechercher dans le champ de recherche comme Bing

Question

Comment puis-je implémenter un bouton de recherche dans le champ de recherche, comme sur un site comme Bing?

Answer 1

Il ressemble à l'intérieur il est, mais il est pas (vous ne pouvez pas mettre HTML à l'intérieur d'une entrée).

Les 2 éléments (une entrée et un bouton) sont proches les uns des autres avec 0 marge et les deux ont la même hauteur. Le graphique du bouton a une marge blanche de 3px. Donc, cela crée cet effet.

Une majoration possible et le style pourrait être:

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