Modelos para caixa de pesquisa

Buenas meus amores ヾ(๑’౪`๑)ﾉﾞ Como vão todos hein? Nossa, que hiatus demorado esse né? UAHSuahsuahsuahs Tipo eu previa que iria ficar muito mais tempo mas como as coisas já voltaram ao normal não teria o porque de deixar o blog desatualizado não é mesmo? Voltei também o meu blog pessoal que estava largado as traças e fiz um post bem legal, quem quiser dar uma conferida clique aqui. Então, vi que a ask ficou bem morta mesmo e acredito que foi pelo motivo do hiatus, como eu não tinha ideia do que postar resolvi criar algo que muita gente usa e pede em blogs de html que são as caixinhas de pesquisa. Agora que voltei meus amores podem voltar a pedir na minha ask certo? Estou a mil e com bastante vontade de ajudar e com algumas ideias novas, em outro momento irei compartilhar essas ideias com todos aqui e acredito que será bem legal e algo que terá um bom retorno! Kiss =3

PARA VER MELHOR AS IMAGENS CLIQUEM NELAS ٩(✿∂‿∂✿)۶

Gente, a única coisa que vocês precisam mexer é no tamanho da caixa pois cada um tem uma sidebar de tamanho diferente, então só mexa no tamanho das caixas certo?

Modelo verde

.search{
float: center;
font-family: Calibri;
font-size: 10px;
}
.searchbar{
width: 170px;
height:10px;
line-height:10px;
background: #EFF7E9;
border: 1px solid #CBDCBE;
box-shadow: inset 0 0 10px #D0DFC5;
padding: 8px 8px 8px 8px;
font-family: Calibri;
font-size: 10px;
color: #BFD2B1;
text-shadow: 1px 1px 1px #FFF;
-webkit-border-radius: 100px;
-webkit-border-bottom-right-radius: 1px;
-moz-border-radius: 100px;
-moz-border-radius-bottomright: 1px;
border-radius: 100px;
border-bottom-right-radius: 1px;
}
.searchbut{
width: 50px;
height:28px;
background: #EFF7E9;
border: 1px solid #CBDCBE;
box-shadow: inset 0 0 10px #D0DFC5;
padding-top: 20px 8px 8px 8px;
font-family: Calibri;
font-size: 10px;
color: #BFD2B1;
text-shadow: 1px 1px 1px #FFF;
-webkit-border-radius: 100px;
-webkit-border-bottom-left-radius: 1px;
-moz-border-radius: 100px;
-moz-border-radius-bottomleft: 1px;
border-radius: 100px;
border-bottom-left-radius: 1px;
}

 Modelo lilás

.search{
float: center;
font-family: Calibri;
font-size: 10px;
}
.searchbar{
width: 182px;
height:15px;
line-height:10px;
background: #EEE4F2;
border: 1px solid #CBB4D5;
box-shadow: inset 0 0 10px #D7BEE2;
padding: 8px 8px 8px 8px;
font-family: Calibri;
font-size: 10px;
color: #C4ADCE;
text-shadow: 1px 1px 1px #FFF;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.searchbut{
width: 38px;
height:34px;
background: #EEE4F2;
border: 1px solid #CBB4D5;
box-shadow: inset 0 0 10px #D7BEE2;
padding-top: 8px 8px 8px 8px;
font-family: Calibri;
font-size: 10px;
color: #C4ADCE;
text-shadow: 1px 1px 1px #FFF;
border-radius:100%;
-webkit-border-radius:100%;
-webkit-border-radius:100% 100% 0% 100%;
-webkit-border-radius: 100px;
}

Modelo rosa

.search{
float: center;
font-family: Calibri;
font-size: 10px;
}
.searchbar{
width: 182px;
height:15px;
line-height:10px;
background: #FFE6E6;
border: 1px solid #FBC3C3;
box-shadow: inset 0 0 10px #FCC2C2;
padding: 8px 8px 8px 8px;
font-family: Calibri;
font-size: 10px;
color: #FFC1C1;
text-shadow: 1px 1px 1px #FFF;
-webkit-border-radius: 2px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius: 2px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
border-radius: 2px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
.searchbut{
width: 38px;
height:34px;
background: #FFE6E6;
border: 1px solid #FBC3C3;
box-shadow: inset 0 0 10px #FCC2C2;
padding-top: 8px 8px 8px 8px;
font-family: Calibri;
font-size: 10px;
color: #FFC1C1;
text-shadow: 1px 1px 1px #FFF;
-webkit-border-radius: 2px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius: 2px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
border-radius: 2px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}

Código para por no gadget:

<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" type="text" value="Press and enter" />
<input class="searchbut" type="submit" value="Go" />
</form>