Modelos de caixa de pesquisa

Olá delícias ~(^3^)~

Como está a vida de vocês? A minha maravilhosamente boa. Não sei se vocês já sabem, mas eu criei um bloguinho pessoal chamado Imperfectous, e queria saber sobre o que acharam dele. Eu gostei bastante, pois lá tenho liberdade de postar como quiser, quando quiser e o que eu quiser. Vocês podem visitá-lo aqui ou no menu acima. Tenho outra coisa a contar, resolvi desistir de terminar meu livro ç3ç, mas resolvi começar outro, que se chama O Último Sonho. Sabe quando você sonha algo, como se fosse um sinal ou uma dica e precisa realizar? Então, sonhei com uma história e resolvi registrá-la em um novo livro ♥. E foi dessa maneira que eu tive inspiração para começar de novo *u*

Cumprindo com a nossa agenda, o post que eu preparei para hoje contém modelos para caixa de pesquisa, sendo eles de 2 estilos, com a mesma cor e tamanhos, mas que vocês podem fazer as modificações necessárias a seu gosto. Se usarem, creditem ao With You, e é proibido reblogar -3-

  

.searchbar {

height: 20px; /*Altura da caixa de pesquisa*/

width: 200px; /*Largura da caixa de pesquisa edite se quiser*/

border: 1px solid #CORDABORDA; /*Bordinha da caixa de pesquisa*/

background: #CORDOFUNDO; /*Fundo da caixa de pesquisa*/

text-align: center; /*Alinhamento do texto mude se quiser*/

color: #CORDAFONTE!important; /*Cor da fonte*/

font: 12px calibre !important; /*Aqui é a fonte mude se quiser*/

margin-bottom: 3px;

box-shadow: inset 1px 1px 0px #ffffff; /* sombra interna */

border-radius: 1px; /*bordas arredondadas*/

}

    

.searchbar{

outline: none;

height: 20px; /*Altura da caixa de pesquisa*/

width: 200px; /*Largura da caixa de pesquisa edite se quiser*/

border: 1px solid #CORDABORDA; /*Bordinha da caixa de pesquisa*/

background: #CORDOFUNDO; /*Fundo da caixa de pesquisa*/

line-height: 2px;

text-align: center;

color: #CORDAFONTE; /*Cor da fonte*/

font-family: Tahoma;

font-size: 11px;

-moz-box-shadow:inset 0 0 4px #SUACOR; 

-webkit-box-shadow:inset 0 0 4px #SUACOR;

box-shadow:inset 0 0 4px #SUACOR;

-webkit-border-radius: 2px;

-moz-border-radius: 2px;

border-radius: 2px;

-webkit-border-radius:2px;

-moz-border-radius:2px;

border-radius:2px;

-webkit-box-shadow:0 0 3px #SUACOR;

-webkit-transition-duration: .50s;

}

.searchbar:hover{

opacity: 0.6;

height: 18px; /*Altura da caixa de pesquisa em hover edite se quiser*/

-webkit-transition-duration: .50s;

}

Gostaram? Façam as modificações necessárias aonde vocês entenderem e quiserem :3. Até breve ~