Buscador original

Un lector del Escaparate me ha mandado al email el código necesario para colocar un buscador en el blog, que además de eficiente es muy original en su diseño.

[1] Este es el código que colocaremos en un nuevo elemento HTML (Gadget) en nuestra sidebar:

<form action="/search" style="display:inline;" method="get">
<input id="s" onfocus="this.value=''" value="Texto a buscar" class="formsuch" name="q" size="17" type="text"/>
<input alt="Buscar" src="http://img142.imageshack.us/img142/7/searchiconry7.png" class="searchicon" value="Search" name="submit" type="image"/>
</form>

[2] Y este será el código CSS que colocaremos en la parte de "Edición HTML" de nuestra plantilla, siempre antes de ]]></b:skin>:

.searchicon:focus {
    background-color: white;
     color : black;
    outline : none; }

input:focus {
    background-color: #FFFFCC;
     color : black;
    outline : none; }

legend {
    padding: 0.5em 0.5em 0 0.5em;
    font: 30px Georgia,Verdana,sans-serif;}                  
                  
input {
    border : 1px solid black;
    padding: 4px;
    outline : none;  }     
  
.searchicon {
    margin-left : -26px;
    margin-bottom : -29px;
    border : 0;}

[3] Aquí tenéis el resultado (aunque el ejemplo es simplemente una imagen).
La "cajita" del buscador cambiará de color cuando introduzcamos los terminos de búsqueda y, por supuesto, el texto que se ve dentro de ella "Texto a buscar"  desaparece al escribir nuestro texto.

No hay problema en colocarlo en un fondo de color, ya que la imagen de los binoculares con ojitos tiene fondo transparente.