Suchen Taste in das Suchfeld wie Bing

Question

Wie kann ich eine Suchtaste in dem Suchfeld implementieren, wie auf einer Website wie Bing gesehen?

Answer 1

Es sieht aus wie in er ist, aber es ist nicht (man kann nicht innerhalb einer Eingabe setzen html).

2 Elemente (ein Eingang und ein Knopf) sind nahe beieinander und mit 0 Rand und beide haben die gleiche Höhe. Die Grafik der Schaltfläche hat einen 3px weißen Rand. So ist es diesen Effekt erzeugt.

Eine mögliche Markup und Styling könnten sein:

<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

Ein cooler Bing-like Search Box (Button auf der Innenseite)