MODELO 1
.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
#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;
}
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;
}
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;
}
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;
}
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;
}
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>
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 == '') {this.value = 'Digite sua busca..';}' onfocus='if (this.value == 'Digite sua busca..') {this.value = '';}' 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="➜"/>
</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
<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
<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 == "") {this.value = "Search";}" onfocus="if (this.value == "Digite a busca e tecle Enter") {this.value = "";}" type="text" value="Digite a busca e tecle Enter" /> </form> </div>
<br/><br/>
</center>
MODELO 10
#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>