Modelos caixa de pesquisa simples ♥

Hello meus tacos, tudo bem? Nem estranhem de eu estar postando duas vezes no mesmo dia pois estou aproveitando que a Wendy ainda não trocou de layout e que eu já postei no Having cherry para trazer este tuto, decidi trazer modelos de caixa de pesquisa o mesmo que uso no blog atual, são bem simples mas bem fofos e ficam ótimas em layouts clean e sem muitas frescuras, eu mesma faz um bom tempo que não uso mais caixas de pesquisa com botão e com efeitos hover, para mim são melhores e ficam legais em qualquer tema de qualquer modelo e cores! Então mudando um pouco de assunto, estou em dúvida se realmente coloco postadoras aqui no blog, sempre que coloco alguém aqui para me ajudar sempre dá algo errado ou sempre acontece alguma coisa. Então vou pensar bem bem direitinho sobre isto e ver no vai dar!!

Mas continuando sobre as vagas de postadoras terei que ver como irei achar umas meninas bem legais para por no blog, até hoje coloquei duas pessoas e não foi por muito tempo, quero alguém que tenha compromisso e que saiba realmente o que esteja fazendo e o que está postando, digo se aqui é um blog sobre html é óbvio que a pessoa tem que postar coisas relacionadas a isso certo? E tem que realmente saber mexer em códigos html e css e saber explicar tudo bem certinho, explicar de um jeito que o leitor saiba o que está querendo passar e aprender com a explicação, pois nada pior que entrar em um blog gostar dos tutoriais mas não entender bufulhas do que está escrito ou não entender o que o post quer passar, mas enfim vou ver ao certo o que farei e depois posto aqui, então amores beijocas e até mais! -^3^-

Vá até modelo e clique em editar html, dentro procure por: ]]skin; e acima dele cole o modelo que preferir da caixinha de pesquisa.

Modelo 1

/*** Caixa de pesquisa por gnmh ***/

input, textarea, option, select, button form{

font-family: PF Arma Five;

font-size: 8px; 

color:#C5C1C4;

text-shadow: 1px 1px 1px #;

background:#E8E7E8;border: solid 1px #D6D2D5;

box-shadow: inset 0 0 6px #, 0px 1px 1px #CADFD0;

text-align: center;

height: 25px;

width: 220px;

transition:All 0.7248s ease-in-out;

-webkit-transition:All 0.7248s ease-in-out;

-moz-transition:All 0.7248s ease-in-out;

-o-transition:All 0.7248s ease-in-out;

border-radius: 3px;cursor: pointer;}

input:focus{outline:none;}

*::-moz-selection {

background:ffdbde;

color: #B7ABBB;

text-shadow: 0 1px 0 #ffffff;

}

Modelo 2 

/*** Caixa de pesquisa por gnmh ***/

input, textarea, option, select, button form{

font-family: PF Arma Five;

font-size: 8px; 

color:#C5C1C4;

text-shadow: 1px 1px 1px #;

background:#fff;border: solid 1px #D6D2D5;

box-shadow: inset 0 0 6px #, 0px 1px 1px #CADFD0;

text-align: center;

height: 25px;

width: 220px;

transition:All 0.7248s ease-in-out;

-webkit-transition:All 0.7248s ease-in-out;

-moz-transition:All 0.7248s ease-in-out;

-o-transition:All 0.7248s ease-in-out;

border-radius: 3px;cursor: pointer;}

input:focus{outline:none;}

*::-moz-selection {

background:ffdbde;

color: #B7ABBB;

text-shadow: 0 1px 0 #ffffff;

}

Modelo 3 

/*** Caixa de pesquisa por gnmh ***/

input, textarea, option, select, button form{

font-family: PF Arma Five;

font-size: 8px; 

color:#FBC2C2;

text-shadow: 1px 1px 1px #;

background:#F8DFDF;border: solid 1px #F9C0C0;

box-shadow: inset 0 0 6px #, 0px 1px 1px #F9C8C8;

text-align: center;

height: 25px;

width: 220px;

transition:All 0.7248s ease-in-out;

-webkit-transition:All 0.7248s ease-in-out;

-moz-transition:All 0.7248s ease-in-out;

-o-transition:All 0.7248s ease-in-out;

border-radius: 3px;cursor: pointer;}

input:focus{outline:none;}

*::-moz-selection {

background:ffdbde;

color: #B7ABBB;

text-shadow: 0 1px 0 #ffffff;

}

Modelo 4

/*** Caixa de pesquisa por gnmh ***/

input, textarea, option, select, button form{

font-family: PF Arma Five;

font-size: 8px; 

color:#BAD3DA;

text-shadow: 1px 1px 1px #;

background:#DFEAEC;border: solid 1px #CEDDE1;

box-shadow: inset 0 0 6px #, 0px 1px 1px #D9E3E5;

text-align: center;

height: 25px;

width: 220px;

transition:All 0.7248s ease-in-out;

-webkit-transition:All 0.7248s ease-in-out;

-moz-transition:All 0.7248s ease-in-out;

-o-transition:All 0.7248s ease-in-out;

border-radius: 3px;cursor: pointer;}

input:focus{outline:none;}

*::-moz-selection {

background:ffdbde;

color: #B7ABBB;

text-shadow: 0 1px 0 #ffffff;

}

Modelo 5

/*** Caixa de pesquisa por gnmh ***/

input, textarea, option, select, button form{

font-family: PF Arma Five;

font-size: 8px; 

color:#CAC0CF;

text-shadow: 1px 1px 1px #;

background:#E6E1E8;border: solid 1px #D8CCDC;

box-shadow: inset 0 0 6px #, 0px 1px 1px #D1C4D7;

text-align: center;

height: 25px;

width: 220px;

transition:All 0.7248s ease-in-out;

-webkit-transition:All 0.7248s ease-in-out;

-moz-transition:All 0.7248s ease-in-out;

-o-transition:All 0.7248s ease-in-out;

border-radius: 3px;cursor: pointer;}

input:focus{outline:none;}

*::-moz-selection {

background:ffdbde;

color: #B7ABBB;

text-shadow: 0 1px 0 #ffffff;

}

Para funcionar o efeito da caixa cole o código abaixo dentro de um gadget:

<form action="/search" method="get"><input type="text" name="q" value="Procure + Enter"/></form>