Modelos caixa de pesquisa

Tudo bem com vocês? Pois bem amores hoje o post é prático e bem simples na verdade uma menina do blog Lovely Monsters me pediu e estou atendendo o pedido dela que é modelo de caixa pesquisa sem botão de busca e que precise apertar o enter para ir onde a pessoa procura. Eu fiz igual a caixinha aqui do blog apenas mudei um pouco para não ficar muito parecido, usei 4 cores como exemplo mas poderão modificar as cores como quiserem isso é o de menos. Só queria que qualquer pessoa que modificar ou usar uma das caixinhas me creditassem certo? 

É tão chato quando você faz algo com dedicação com carinho e chega um qualquer para usar e nem ao menos reconhecer o esforço. Bem gente outra coisa que gostaria de comentar, eu quase nunca recebo pedidos pela ask e eu gostaria muito de começar a atender pedidos, pois não sei se perceberam mas tenho uma noção de códigos html e seria um prazer para mim criar coisas exclusivas feitas inteiramente por mim, tipo digo isso pois muitos leitores sabem que não sou muito de ficar postando efeitos e tutoriais, nunca foi meu forte. 

Mas de uns tempos para cá criei gosto pela coisa e até que está saindo trabalhos razoáveis, lembro que em alguns meses atrás só saia porcaria e ninguém dava muita bola rsrss (eram horríveis) até acabei excluindo alguns posts de tutoriais antigos pois eram tudo tosco u.u. Bem amores parei com o lero lero! Vamos ao tuto? Para quem quiser ver melhor como a caixinha fica online podem clicar aqui ☆  

Para o efeito funfar colem o código abaixo dentro de um html java script salvem e depois confiram para ver se está tudo certinho ^-^

<center><form action="/search" method="get">

<input type="text" name="q" value="Pesquise + Enter"/>

</form></center>

Caixinha Azul

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

input, textarea, option, select, button form{

font: italic 1em verdana;

color:#A4D1CD;

text-align: center;

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

height: 25px;

width: 200px;

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;

box-shadow: inset 0px 0px 5px #BDDDDA;

background:-webkit-gradient(linear, 80% 20%, 10% 21%, from(#D7E8E6), to(#D7E8E6));

border: solid 1px  #BDDDDA;

border-radius: 10px;cursor: pointer;

}

Caixinha Rosa

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

input, textarea, option, select, button form{

font: italic 1em verdana;

color:#F1A5A5;

text-align: center;

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

height: 25px;

width: 200px;

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;

box-shadow: inset 0px 0px 5px #F1A5A5;

background:-webkit-gradient(linear, 80% 20%, 10% 21%, from(#FCC9C9), to(#FCC9C9));

border: solid 1px  #F7B7B7;

border-radius: 10px;cursor: pointer;

}

Caixinha Roxa

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

input, textarea, option, select, button form{

font: italic 1em verdana;

color:#AF9EBC;

text-align: center;

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

height: 25px;

width: 200px;

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;

box-shadow: inset 0px 0px 5px #C3B4CE;

background:-webkit-gradient(linear, 80% 20%, 10% 21%, from(#DDD4E4), to(#DDD4E4));

border: solid 1px  #C3B4CE;

border-radius: 10px;cursor: pointer;

}

Caixinha Verde 

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

input, textarea, option, select, button form{

font: italic 1em verdana;

color:#A3AF90;

text-align: center;

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

height: 25px;

width: 200px;

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;

box-shadow: inset 0px 0px 5px #BBC4AC;

background:-webkit-gradient(linear, 80% 20%, 10% 21%, from(#D4DCC7), to(#D4DCC7));

border: solid 1px  #BBC4AC;

border-radius: 10px;cursor: pointer;

}