10 modelos de caixa de pesquisa

Views:
MODELO 1

<style>
.cf:before, .cf:after{
    content:"";
    display:table;
}
.cf:after{ clear:both;}
.cf{ zoom:1;}

 /* Estilos*/
.search-wrapper {
width: 220px;
margin: 45px auto 50px auto;
box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
}
/* Form text input */
.search-wrapper input {
width: 138px;
height: 20px;
padding: 10px 5px;
float: left;
font: 13px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #EEE;
border-radius: 3px 0 0 3px;
}
.search-wrapper input:focus {
    outline: 0;
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.search-wrapper input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: normal;
}
.search-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: normal;
}
.search-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: normal;
}
/* Form submit button */
.search-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 72px;
font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: #ffffff;
text-transform: uppercase;
background: #FF1744;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
}
.search-wrapper button:hover{
    background: #000000;
}
.search-wrapper button:active,
.search-wrapper button:focus{
    background: #c42f2f;
    outline: 0;
}
.search-wrapper button:before { /* left arrow */
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #FF1744 transparent;
    top: 12px;
    left: -6px;
}
.search-wrapper button:hover:before{
    border-right-color: #e54040;
}
.search-wrapper button:focus:before,
.search-wrapper button:active:before{
        border-right-color: #c42f2f;
} 
.search-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
    border: 0;
    padding: 0;
}
</style>
<form action="/search" class="search-wrapper cf">
        <input type="text" method="get" name="q" placeholder="Digite aqui..." required="" />
        <button type="submit">Buscar</button>
    </form>



MODELO 2


<center><style type="text/css">
#pesquisafsm-caixa {
background: #eee; padding:10px; border:0 none; margin-left: 10px;width:170px;
}
#pesquisafsm-botao {
border: 1px solid #222;
color: #eee;
background: url(http://i.imgur.com/cz4sguf.png) no-repeat left #800080;
margin-left: -3px;
color:#fff;
font: 'trebuchet ms', trebuchet;
padding:10px 10px 10px 22px;
border:0 none;
font-weight:bold;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
#pesquisafsm-botao:hover {
cursor: pointer;
background:  url(http://i.imgur.com/cz4sguf.png) no-repeat left #000;
}
</style>
<form action="/search" id="searchthis" method="get" style="display: inline;">
<input id="pesquisafsm-caixa" name="q" placeholder="O que está procurando?" size="40" type="text" /> <input id="pesquisafsm-botao" type="submit" value="Pesquisar" /> </form>

<div class='clear'></div></center>


MODELO 3

<style type="text/css">
#busca {
margin:0 auto;
padding:0;
}
#txtbusca {
border:0px solid #222;
background:#eeeeee;
width:220px;
height:25px;
margin:0 auto;
padding:5px 0 5px 5px;
float:left; // posição do campo
line-height:36px; // altura da linha
}
#btnBusca {
background:#7B1FA2;
position:relative;
color:#ffffff;
margin:0 auto;
padding:10px;
border:0 none;
font-size:11px;
font-weight:bold;
text-transform:uppercase;
}
#btnBusca:hover {
background:#000000;
}
</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>


MODELO 4


<style type="text/css">
#pesquisa-caixa {
background: #eee;
padding:10px;
border-radius:10px 0 0 10px;
border:0 none; width:150px;
}
#pesquisa-botao {
border: 1px solid #222;
color: #eee;
padding-left:10px;
padding-top:10px;
background: #00897B;
border-radius: 6px;
margin-left: -3px;
color:#fff;
font: 'trebuchet ms', trebuchet;
padding:10px 20px;
border-radius:0 10px 10px 0;
border:0 none;
font-weight:bold;
}
#pesquisa-botao:hover {
color: #eee;
padding-left:8px;
padding-top:8px;
background:#004D40;
border-radius: 6px;
margin-left: -3px;
color:#fff;
font: 'trebuchet ms', trebuchet;
padding:10px 20px;
border-radius:0 10px 10px 0;
font-weight:bold;
 }
</style>

<form action="/search" id="searchthis" method="get" style="display: inline;">
<input id="pesquisa-caixa" name="q" placeholder=" Faça sua busca aqui...." size="40" type="text" />
<input id="pesquisa-botao" type="submit" value="Pesquisar" />
</form>


MODELO 5

<style>
#searchbox {
width: 280px;
background: #fff;
}

#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: 1px solid #eee;;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
    color: #ffffff !important;
    padding: 10px 35px 10px 20px;
    width: 180px;
}
#searchbox input[type="text"]:focus {
color: #ffffff !important;
}

#button-submit{
background: #FF80AB  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: 43px;
}

#button-submit:hover {
background: #FF4081 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 6

<style>
#search {
float:right;
height: 30px;
margin:10px 0 0 0;
}
#search input.field {
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; background-position:top right;
background-repeat:no-repeat;
width: 160px;
padding:7px;
outline: none;
font-size: 13px;
border: none;
z-index: 1;
height:16px;
float:left;
padding-right:30px;
}
#search input.field:focus {
background-position:top right;
background-repeat:no-repeat;
}
#search input.submit {
width:70px;
height:30px;
font-weight:bold;
 float:left;
border:none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
cursor:pointer;
margin:0 0 0 1px;
}
#search input.field {
background-image:url(https://lh4.googleusercontent.com/-kWepQUL6ypo/T_bcpvbb5nI/AAAAAAAACFo/OhezBRoj15E/s30/search_icon.png);
background-color:#444;
color: #FFF;
}
#search input.field:focus {
background-image:url(https://lh4.googleusercontent.com/-kWepQUL6ypo/T_bcpvbb5nI/AAAAAAAACFo/OhezBRoj15E/s30/search_icon.png);
background-color:#000;
}
#search input.submit {
background-color:#C51162;
color:#fff;
}
</style>
<div id='search'>
<form action='/search' id='searchform' method='get'>
<div><input class='field' id='s' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Digite sua busca..&apos;;}' onfocus='if (this.value == &apos;Digite sua busca..&apos;) {this.value = &apos;&apos;;}' type='text' value='Digite sua busca..'/>
<input class='submit' name='submit' type='submit' value='Buscar'/></div>
</form>
</div>






MODELO 7

<div class="flexsearch">
  <div class="flexsearch--wrapper">
   <form class="flexsearch--form" action="/search" method="get">
    <div class="flexsearch--input-wrapper">
     <input class="flexsearch--input" type="text" placeholder="search here..." name="q" />
    </div>
    <input class="flexsearch--submit" type="submit" value="&#10140;"/>
   </form>
  </div>
</div>
<style>
/***********************
 * Essential Structure *
 ***********************/
.flexsearch--wrapper {
 height: auto;
 width: auto;
 max-width: 100%;
 overflow: hidden;
 background: transparent;
 margin: 0;
 position: static;
}

.flexsearch--form {
 overflow: hidden;
 position: relative;
}

.flexsearch--input-wrapper {
 padding: 0 66px 0 0; /* Right padding for submit button width */
 overflow: hidden;
}

.flexsearch--input {
  width: 100%;
}

/***********************
 * Configurable Styles *
 ***********************/

.flexsearch--input {
  -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
  height: 40px;
  padding: 0 46px 0 10px;
 border-color: #D84315;
  border-radius: 35px; /* (height/2) + border-width */
  border-style: solid;
 border-width: 3px;
  margin-top: 15px;
  color: #000000;
  font-family: 'Helvetica', sans-serif;
 font-size: 18px;
 -webkit-appearance: none;
 -moz-appearance: none;
}

.flexsearch--submit {
  position: absolute;
 right: 0;
 top: -10px;
 display: block;
 width: 60px;
 height: 60px;
  padding: 0;
  border: none;
 margin-top: 20px; /* margin-top + border-width */
  margin-right: 5px; /* border-width */
 background: transparent;
  color: #000000;
  font-family: 'Helvetica', sans-serif;
  font-size: 18px;
  line-height: 60px;
}

.flexsearch--input:focus {
  outline: none;
  border-color: #D84315;
}

.flexsearch--input:focus.flexsearch--submit {
  color: #000000;
}

.flexsearch--submit:hover {
  color: #2288bb;
  cursor: pointer;
}

::-webkit-input-placeholder {
 color: #888;
}

input:-moz-placeholder {
  color: #888
}
</style>



MODELO 8



<div class="search">
  <input class="search_box" type="checkbox" id="search_box" />
  <label class="icon-search" for="search_box"></label>
  <div class="search_form">
   <form action="/search" method="get">
<input autocomplete="off" name="q" placeholder="What are you looking for?" type="text" value="" />
</form>
  </div>
</div>
<style>
@import "//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css";
.search{
  position:relative;
  display: inline-block;
left:170px;
}
[class^="icon-"]{
  background: #3498db;
  color:#fff;
  border-radius:5px;
  display:inline-block;
  padding:6px 7px 7px;
  font-size:18px;
  text-shadow:1px 1px 2px #21638F;
  box-shadow: inset 0px 0px 0px #21638F;
  transition:all 0.5s ease;
  -webkit-transition:all 0.5s ease;
  cursor: pointer;
  z-index:10;
  position:relative;
}
[class^="icon-"]:hover{
  background: #5dade2;
  text-shadow:0px 0px 0px #21638F;
  box-shadow: inset 0px 0px 8px #21638F;
  transition:all 0.5s ease;
  -webkit-transition:all 0.5s ease;
}
.search_form{
  background: #5dade2;
  position:absolute;
  z-index:0;
  padding:0px 5px;
  right:0;
  top:15px;
  overflow: hidden;
  border-radius:10px;
  width: 20px;
  height:0px;
  transition: height 0.2s ease-out 0.5s , top 0.2s ease-out 0.5s, padding 0.2s ease-out 0.5s, width 0.3s ease-out 0.2s;
  -webkit-transition: height 0.2s ease-out 0.5s , top 0.2s ease-out 0.5s, padding 0.2s ease-out 0.5s, width 0.3s ease-out 0.2s;
}
.search_form form{
ebuchet MS, sans-serif;">  opacity:0;
   transition:all 0.3s ease-out;
  -webkit-transition:all 0.3s ease-out;
}
.search_form input{
  background:#fff;
  border:none;
}
.search_form input[type='text']{
  border-radius:5px 0 0 5px;
  width:150px;
  margin:0px 1px 0px 0;
  padding:0px 5px 1px;
  min-height:23px;
}
.search_form input[type='submit']{
  border-radius:0 5px  5px 0;
  text-transform:uppercase;
  font-size:11px;
  padding:0px 5px;
  min-height:24px;
  margin:0px 0px 0px 0;
  cursor: pointer;
}
.search_box{
  visibility: hidden;
}
.search_box:checked~.search_form{
  width: 213px;
  height:24px;
  padding:5px;
  top:35px;
  transition: height 0.2s ease-out, top 0.2s ease-out, padding 0.2s ease-out, 0.3s width ease-out 0.2s;
  -webkit-transition: height 0.2s ease-out, top 0.2s ease-out, padding 0.2s ease-out, 0.3s width ease-out 0.2s;
}
.search_box:checked~.search_form form{
  opacity:1;
  transition:0.3s all ease-out 0.5s;
  -webkit-transition:0.3s all ease-out 0.5s;
}
</style>


MODELO 9

<center>
   <style> 
   #search {  
   border: 1px solid #BDBDBD;  
   background: white url(https://1.bp.blogspot.com/-WBucJpE37lE/XHhV0rdUDII/AAAAAAABkjI/V8n-vGtnqhMGWZk3dHqh5xuMlBhSdVxZwCLcBGAs/s1600/iconfinder_icon-111-search_314807.png) 98% 50% no-repeat;  
   text-align: left;  
   padding: 8px 24px 6px 6px;  
   width: 75%;  
   height: 18px; mouse:pointer:  
   }  
   #search #s {  
   background: none;  
   color: #BDBDBD;  
   font-family: verdana; 
   font-size: 11px;  
   border: 0;  
   width: 100%;  
   padding: 0;  
   margin: 0;  
   outline: none;  
   }  
   </style> 
   <div id="search" title="Type and hit enter"> <form action="/search" id="searchform" method="get"> <input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search&quot;;}" onfocus="if (this.value == &quot;Digite a busca e tecle Enter&quot;) {this.value = &quot;&quot;;}" type="text" value="Digite a busca e tecle Enter" /> </form> </div>  
   <br/><br/>
   </center>

MODELO 10

<style type="text/css">
    #hbz-searchbox {
        background-color: transparent;
        padding: 5px;
        border-radius: 10px;
        margin: 10px auto;
        min-width: 238px;
        max-width: 288px;
    }
   
    #hbz-input {
        background-color: #FEFEFE;
        border: medium none;
        font: 12px/12px "HelveticaNeue", Helvetica, Arial, sans-serif;
        margin-right: 2%;
        padding: 4%;
        box-shadow: 2px 1px 4px #999999 inset;
        border-radius: 9px;
        width: 60.33%;
    }
   
    #hbz-input:focus {
        outline: medium none;
        box-shadow: 1px 1px 4px #0D76BE inset;
    }
   
    #hbz-submit {
        background: transparent linear-gradient(to bottom, #FF1744 0%, #FF1744 100%) repeat;
        border-radius: 9px;
        border: medium none;
        color: #FFF;
        cursor: pointer;
        font: 13px/13px "HelveticaNeue", Helvetica, Arial, sans-serif;
        padding: 4%;
        width: 28%;
    }
   
    #hbz-submit:hover {
        background: transparent linear-gradient(to bottom, #444 0%, #444 100%) repeat;
    }
</style>

 <form id="hbz-searchbox" action="/search" method="get">
    <input type="text" id="hbz-input" name="q" placeholder="Pesquise aqui..." />
    <input type="hidden" name="max-results" value="8" />
    <input id="hbz-submit" type="submit" value="Buscar" />
</form>