Buscador original e eficiente

Coloque um buscador diferente em seu blog que, ao mesmo tempo é eficiente e original em seu desenho.

1° passo: Coloque esse código em um novo "Elemento HTML (Gadget) " em sua 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º passo: Este será o código CSS que você vai colocar em "Editar HTML" de seu Template, sempre 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;}

Salve e esse é o resultado.

A "caixa" do buscador mudará de cor quando é colocado o termo de busca, sabendo que, o texto que se vê dentro dela "Texto a buscar" desaparece ao escrever qualquer texto.