Buscador interno personalizado

Partiendo del buscador que ya tenemos en nuestro blog vamos a personalizarlo como más nos guste para adaptarlo a la estética del blog o, simplemente, para hacerlo más divertido. :-)

El código que uso para el buscador del Escaparate es este, hay que ponerlo en un nuevo elemento html-javascript:

<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/><input id="search-btn" value="Buscar" type="submit"/></form>

Vamos a sustituir el botón que viene por defecto, por una imagen, para ello cambiamos esta parte del código del buscador, que es la que corresponde al botón:

<input id="search-btn" value="Buscar" type="submit"/></form>

por esta otra:

<input border="0" alt="Buscar" src="http://img234.imageshack.us/img234/5551/magnifyingglassec3.gif" type="image"/>
</form>



Vamos a ir un poco más allá, y cambiaremos el color de la cajita de búsqueda incluyendo una imagen en su interior y colocándole un borde. Partimos del código anterior del buscador del Escaparate:

<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/><input id="search-btn" value="Buscar" type="submit"/></form>

Añadimos en el CSS de nuestra plantilla estas líneas de código, por ejemplo, antes de ]]><b:skin>:

.searchBox{
background: #FFFF99;
background-image:url('http://img234.imageshack.us/img234/3756/emoticonsmilenz6.png');
background-repeat:no-repeat;
padding-left:20px;
border: solid 2px;
border-color: #000000;
}
En estas líneas de código, será donde podremos hacer todos los cambios posteriores.

Ahora añadimos class="searchBox" en el código de nuestro buscador, por ejemplo detrás de type="text":

<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"class="searchBox"/><input id="search-btn" value="Buscar" type="submit"/></form>
Esto hace que nuestro buscador automáticamente se vea como le hemos indicado en el CSS, así:


Modificaciones:

Aquí se cambia el color de la caja de búsqueda:
background: #FFFF99;

En esta línea podemos cambiar la url de la imagen por la que queramos usar.
background-image:url('http://img234.imageshack.us/img234/3756/emoticonsmilenz6.png');

Aquí modificamos el color y ancho del borde de la caja, cuanto mayor sea el número de px, más ancho será el borde y viceversa.
border: solid 2px;
border-color: #000000;

¡Suerte! ;-)