Caixa de Pesquisa Personalizada - 4 modelos #2

Oi pessoal, voltei com um tutorial que é muito acessado aqui no blog: caixa de pesquisa personalizada! Como ele foi feito á um tempinho atrás pensei em renovar um pouco o design dessas caixinhas pra combinar melhor com os layouts mais moderninhos que temos hoje.

Eu fiz quatro modelos todos seguindo esse estilo mais clean, espero que gostem!


COMO USAR: Copie o código do modelo de sua preferência e vá no painel do Blogger em LAYOUT > SIDEBAR > ADICIONAR GADGET, escolha o gadget HTML/Javascript.

Cole o código dentro do espaço maior e salve, logo em seguida arraste mais pra baixo se preferir e salve a organização.

MODELO 1

<style>
#search-box {
position: relative;
width: 100%;
margin: 0;
}
#search-form
{
height: 40px;
border: 1px solid #E7B9A0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}
#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}
#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #E7B9A0;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Digite sua pesquisa...' type='text'/>
<button id='search-button' type='submit'><span>Procurar</span></button>
</form>
</div>

MODELO 2

<style>
#searchbox {
width: 300px;
background: #fff;
border: 2px dashed #000;
}
#searchbox input {
    outline: none;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
background: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
    color: #fff !important;
    padding: 10px 35px 10px 20px;
    width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}
#button-submit{
background: url(https://i.imgur.com/dIJOYxA.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}
#button-submit:hover {
background: url(https://i.imgur.com/dIJOYxA.png);
}
</style>
<br />
<form action="/search" autocomplete="off" id="searchbox" method="get">
<input name="q" placeholder="Digite o que procura" size="15" type="text" />
<input id="button-submit" type="submit" value=" " />
</form>

MODELO 3

<style>
#searchbox {
width: 300px;
background: url(https://i.imgur.com/VwWp9nc.png);
}
#searchbox input {
    outline: none;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
background: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
text-transform: uppercase;
    color: #fff !important;
    padding: 10px 35px 10px 20px;
    width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}
#button-submit{
background: url(https://i.imgur.com/qZqbnY9.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}
#button-submit:hover {
background: url(https://i.imgur.com/qZqbnY9.png);
}
</style>
<br />
<form action="/search" autocomplete="off" id="searchbox" method="get">
<input name="q" placeholder="PESQUISE" size="15" type="text" />
<input id="button-submit" type="submit" value=" " />
</form>

MODELO 4

<style>
#searchbox {
width: 300px;
background: #e2e2e2;
}
#searchbox input {
    outline: none;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
background: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
text-transform: uppercase;
    color: #fff !important;
    padding: 10px 35px 10px 20px;
    width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}
#button-submit{
background: url(https://i.imgur.com/qZqbnY9.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}
#button-submit:hover {
background: url(https://i.imgur.com/qZqbnY9.png);
}
</style>
<br />
<form action="/search" autocomplete="off" id="searchbox" method="get">
<input name="q" placeholder="PESQUISE AQUI" size="15" type="text" />
<input id="button-submit" type="submit" value=" " />
</form>

Qualquer dúvida pode deixar um comentário! Me digam quais os próximos tutoriais que vocês querem ver aqui no BDR.

Mil beijos e até a próxima.