Caixa de pesquisa personalizada

Views:
MODELO 1

<center>
<style type="text/css">
#search-box{
position:relative;
margin:0 auto;
border:0px solid #ccc; /*COR DE BORDA DO GADGET*/
padding:5px;
border-radius:4px; /*GRAU DE ARREDONDAMENTO DO GADGET*/
}
#search-form{
height:40px;
background-color:#fff; /*COR DO BOX DE PESQUISA*/
overflow:hidden;
}
#search-text{
font-size:14px; /*TAMANHO DA FONTE DA BUSCA*/
border-width:0;
background:transparent;
line-height:15px;
}
#search-box input[type="text"]{
width:90%;
padding:10px 0 5px 1em;
color:#000000; /*COR DA FONTE DA BUSCA*/
outline:none}
#search-button{
position:absolute;
top:5px;
right:5px;
height:40px; /*ALTURA DO BOTÃO*/
width:80px; /*LARGURA DO BOTÃO*/
color:#ffffff; /*COR DA FONTE DO BOTÃO*/
text-align:center;
border-width:0;
background-color:#bf9f79; /*COR DO BOTÃO*/
cursor:pointer;
text-transform:uppercase; /*COLOCA O TEXTO DO BOTÃO EM CAPSLOCK*/
border-radius:3px; /*GRAU DE ARREDONDAMENTO DO BOTÃO*/
outline:0/
}
#search-button:hover{
background:#765b49; /*COR DO BOTÃO HOVER*/
}
</style>
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Digite sua busca ...' type='text'/>
<button id='search-button' type='submit'><span>Buscar</span></button></form></div></center>


MODELO 2

<style>
#searchbox {
width: 100%;
background: #33CCCC; /*COR DO BACKGROUND*/
}
#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: "Century Gothic", sans-serif; /*TIPO DA FONTE*/
font-size: 14px; /*TAMANHO DA FONTE*/
    color: #ffffff !important; /*COR DA FONTE */
    padding: 10px 35px 10px 20px;
    width: 220px;
}

#searchbox input[type="text"]:focus {
color: #ffffff; /*COR DA FONTE  */
}
#button-submit{
background: url(http://4.bp.blogspot.com/-4MYBYE0i0Xk/VEQYlljvriI/AAAAAAAAAlQ/_TRkRG5EX1c/s1600/search-icon.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}
#button-submit:hover {
background: url(http://4.bp.blogspot.com/-6S4K8eHPM-c/VEQdf7l84GI/AAAAAAAAAls/j7_kGSpkIfg/s1600/search-icon-hover.png);
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Digite o que procura" />
<input id="button-submit" type="submit" value=" "/>
</form>

MODELO 3

<style type="text/css">
#busca {
width: 100%;
margin:0 auto;
padding:0;
}
#txtbusca {
background:#EEE; /*COR DE FUNDO DA BUSCA*/
width:230px; /*LARGURA DA PESQUISA*/
height:25px; /*ALTURA DA PESQUISA*/
border: none !important;
margin:0 auto;
padding:5px 0 5px 5px;
float:left;
line-height:36px;
}
#btnBusca {
background:#765b49; /*COR DO BOTÃO OK*/
position:relative;
color:#ffffff;/*COR DA FONTE DO BOTÃO OK*/
margin:0 auto;
padding:10px;
border:0 none;
font-size:11px;/*TAMANHO DA FONTE DO BOTÃO OK*/
font-weight:bold;
text-transform:uppercase;
}
#btnBusca:hover {
background:#502e16;/*COR DO BOTÃO OK HOVER*/
}
</style>
<div id='busca'>
<form action="/search" class="search" method="get">
    <input id="txtbusca" name="q" type="text" value="" placeholder="Digite o que você procura" />
    <input id="btnBusca" type="submit" value="Ok"/>
</form>
</div>

Formulário de contato

Nome

E-mail *

Mensagem *

Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage