12 de agosto de 2009

CSS Tutorial - Personalizando sua caixa de busca Google com CSS.



Se possui uma caixa de busca do Google em seu site você pode estilizar caixa de texto e o botão de envio com CSS.
Vamos ultilizar as seguintes propriedades CSS para estilizar a caixa de texto e o botão de envio:
font-family -> tipo de fonte da caixa de texto e botão.
color -> para a cor da fonte da caixa de texto e botão.
background-color -> para o fundo da caixa de texto e botão.
border -> para cor, espessura e estilo da borda.

Importante: Quando a caixa de busca é carregada, o fundo branco da caixa de texto com o logo Google irá sobrepor a estilização. Para que a estilização da caixa de texto funcione temos que apagar o id="cse-search-box"na tag <form> que se encontra no código da caixa de busca Google.

<form action="http://www.google.com/cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="0157104541029603 ...
<input type="hidden" name="ie" value="UTF-8" /> 
...


Pronto ! sem o id="cse-search-box":

<form action="http://www.google.com/cse">
<div>
<input type="hidden" name="cx" value="0157104541029603 ...
<input type="hidden" name="ie" value="UTF-8" >
...


vamos criar duas classes um para a caixa de texto (class="caixadetexto") e outro para o botão (class="envio"). (coloque os valores que quiser nas propriedades.):

.caixadetexto{
font-family:"Verdana", "Arial";
color:#008cff; 
background-color:#252525;
border:dotted #008cff 1px; 
}

.envio{
font-family:"Verdana", "Arial";
color:#008cff; 
background-color:#252525;
border:solid #008cff 2px; 
}


Agora vamos inserir as classes no HTML da caixa de busca Google. A class="caixadetexto" na tag <input type="text"> (para a estilização da caixa de texto) e a class="envio" na tag <input type="submit"> (para a estilização do botão), veja no exemplo abaixo:

<form action="http://www.google.com/cse">
<div>
<input type="hidden" name="cx" value="01571045410296 ...
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" class="caixadetexto" size="30" />
<input type="submit" name="sa" class="envio" value="Pesquisar !" />
</div>
</form>


Pronto, com essa tecnica a sua caixa de busca fica personalizada,

Dica: se quizer deixar sua caixa de busca com os cantos arredondados, aplique as propriedades desse tutorial: CSS Tutorial - bordas com cantos arredondados, sem o uso de imagens

8 comentários:

  1. Muito bom seu blog.Obrigado pela visita.

    ResponderExcluir
  2. Obrigado pelo elogio e obrigado pelo comentário!

    ResponderExcluir
  3. Ei Danillo, e para quem usa searchforms, vc sabe como é possível add a busca google na caixa de busca já pronta em css? Já quebrei a cabeça aqui muitas vezes e até consegui fazer funcionar, mas sempre arruino o layout da caixinha.

    ResponderExcluir
  4. Obrigadaaaaa!!!!! Tava louca atrás disso! haha

    ResponderExcluir
  5. Excelente site para o CSS que é excelente.
    Nem o Google dava informação sobre a caixa de busca no Adsense. Eles dizem para não mexer no código, mas aqui é só estilo não deve ser problema ou pode ser? Eu penso que é só mudança de estilo para combinar com o site.
    Você tem alguma informação a mais sobre a caixa do Adsense ?

    ResponderExcluir
  6. Falá Doutor, meu nome é charles Veiga Santos, consegui "estilizar o meu search, usando o seu tutorial. muito obrigado. Também trabalho como freelancer e sou viciado em web, mas ainda estou no começo.....

    Valeu Abraços!!!

    ResponderExcluir
  7. @Charles Veiga santos: Olá Charles, que bom que você conseguiu cara! ;) Boa sorte para você na sua carreira como web designer !

    ResponderExcluir
  8. valeu pela dica, me ajudou bastante...
    parabéns!

    ResponderExcluir