Caixa de pesquisa personalizada

Hooy , desculpa por eu não ter postado aqui é que eu tava fazendo o novo layout do Kawaii Tutos M.F então tava meio sem tempo mais hoje trouxe aqui um tutorial bem bacana que eu aprendi lá no Cherry Bomb então os créditos pra Liaah .

 Vamos personalizar a caixa de pesquisa?

Cole o seguinte código no seu css  ou seja acima de ]]></b:skin>

.search{
float: left;
font-family: Century Gothic !important; /* Fonte do campo de texto*/
}
.searchbar{
height: 20px; /*Altura da caixa*/
width: 190px; /*largura da caixa*/
border-radius:15px;
background:#fff;
text-align:center;
color:#000 !important; /*cor do texto*/
font: 12px Century Gothic !important; /*fonte do texto*/
}
.searchbut{
background: url('Url da imagem do botão');
width:30px; /*Largura do botão*/
height:30px; /*altura do botão*/
border: 0;
padding:7px;
}

Adicione um novo gadget java e cole o seguinte código

<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" placeholder='Digite o que procura' type="text" value="" />
<input class="searchbut" type="submit" value="" />
</form>

Fácil né?