Personalizar el buscador de tu blog con CSS

Con motivo de la inclusión del nuevo buscador, os daréis cuenta de que no es uno cualquiera, sino que lo hemos modificado para darle un diseño más atractivo para nuestro blog. Para aquellos que os estaréis preguntando cómo demonios se puede hacer eso, pretendo darles alguna respuesta con una pequeña guía para retocar vuestros formularios de búsqueda.

Al fin y al cabo lo único que hemos utilizado aquí son estilos CSS y alguna que otra imagen. Fácil verdad, pues manos a la obra.

Ya os mostramos en un post anterior los distintos formularios de búsqueda, para este caso utilizaremos este como ejemplo.

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

En primer lugar, añadir un nuevo elemento HTML/Javascript, si queréis añadir una imagen para decorar los alrededores del buscador insertamos debajo de lo anterior, esta línea de código, donde le añadiremos la etiqueta class="imagen" para poder modificarla con los estilos mediante CSS.

<img style="border:0" src="URL DE LA IMAGEN" class="imagen"/>

A continuación añadiremos la zona donde irán todos los estilos, en primer lugar colocaremos el de la imagen.

<style type="text/css">
.imagen {
margin:-135px 0;
padding-bottom:200px;
}
...............
</style>

Ahora solo nos queda modificar el formulario a nuestro antojo. Lo primero añadir dos clases tanto como a la caja de texto como al botón. Por ejemplo, class="cajadetexto" y class="boton" y lo incluiremos aquí.

<form id="searchthis" action="/search" style="display:inline;" method="get">

<input id="search-box" name="q" type="text" class="cajadetexto"/>

<input alt="Buscar" value="Buscar" name="submit" title="Realiza tu busqueda" type="submit" class="boton"/>

</form>

Una vez hecho esto en el formulario podemos agregar estilos en nuestra zona que anteriormente designamos para ello.

<style type="text/css">
.imagen{
margin:-135px 0;
padding-bottom:200px;
}

.boton{
margin:40px 0 0 100px;
font-size:10px;
font-family:Verdana,Helvetica;
font-weight:bold;
color: #c7c67a ;
background:#638cb5;
border:0px;
width:68px;
height:21px;
}

.cajadetexto{
margin:90px 0 0 50px;
}
</style>

Y esto es todo, evidentemente podréis jugar a cambiar los distinto parámetros y añadir otro tipo de imágenes, es más si no queréis tener el botón, lo podéis sustituir por un icono añadiendo esto en el formulario.

<input alt="Buscar" value="Buscar" name="submit" title="Realiza tu busqueda" src="URL DEL ICONO" type="image"/>

También podéis rellenar el fondo de la caja de texto añadiendo en el estilo la propiedad background:(#COLOR);. Por otro lado si quieres que aparezca un pequeño icono deberes agregar otra propiedad, background-image:url('URL DE LA IMAGEN') no-repeat;.

En fin la mejor manera es ir probando hasta quedaros con el resultado que mas os guste, si tenéis algún problema o duda, dejar un comentario que os contestaremos para echarte una mano.

Demo: Blog de pruebas