5 Stylish Search Box Widget For Blogger

Code 1: For this Style copy the code:-
Add Search Box Code 1
<style>
#searchbox {
    background: #d8d8d8;
    border: 1px ;
    padding: 5px 5px;
    width: 250px;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input {
    outline: none;
}
#searchbox input[type="text"] {
    background: url(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 6px #fff;
    border-width: 1px;
    border-style: solid;
    border-color: #fff;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 55%;
    padding: 8px 15px 8px 30px;
}
#button-submit {
    background: #6A6F75;
    border-width: 0px;
    padding: 9px 0px;
    width: 23%;
    cursor: pointer;
    font: bold 12px Arial, Helvetica;
    color: #fff;
    text-shadow: 0 1px 0 #555;
}
#button-submit:hover {
    background: #4f5356;
}
#button-submit:active {
    background: #5b5d60;
    outline: none;
}
#button-submit::-moz-focus-inner {
    border: 0;
}
</style>
<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" />
</form>

Back to the Post

Code 2: For this Style copy the code:-
Search Bar2
<style>
#searchbox {
width: 240px;
}
#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: url(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;
border: 2px solid #f2f2f2;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #6A6F75;
    width: 160px;
    padding: 14px 17px 12px 30px;
    -webkit-border-radius: 5px 0px 0px 5px;
    -moz-border-radius: 5px 0px 0px 5px;
    border-radius: 5px 0px 0px 5px;
    text-shadow: 0 2px 3px #fff;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}
#searchbox input[type="text"]:focus {
background: #f7f7f7;
border: 2px solid #f7f7f7;
width: 200px;
padding-left: 10px;
}
#button-submit{
background: url(http://4.bp.blogspot.com/-slkXXLUcxqg/VEQI-sJKfZI/AAAAAAAAAlA/9UtEyStfDHw/s1600/slider-arrow-right.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 43px;
height: 45px;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>

Back to the Post

Code 3: For this Style copy the code:-
Search Bar3
<style>
#searchbox {
width: 280px;
background: url(http://1.bp.blogspot.com/-dwLNyhnHlTg/VEQZwf9drLI/AAAAAAAAAlg/rbd0HN4EZrY/s1600/search-box.png) no-repeat;
}
#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: #f2f2f2 !important;
    padding: 10px 35px 10px 20px;
    width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}
#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="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>

Back to the Post

Code 4: For this Style copy the code:-
Add Search Box Code 4
<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>
.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 60px 0 0; /* Right padding for submit button width */
overflow: hidden;
}
.flexsearch--input {
  width: 100%;
}
.flexsearch--input {
  -webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
  height: 20px;
  padding: 0 46px 0 10px;
border-color: #888;

  border-style: solid;
border-width: 2px;
  margin-top: 2px;
  color: #333;
  font-family: 'Helvetica', sans-serif;
font-size: 20px;
-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: 2px; /* border-width */
background: transparent;
  color: #888;
  font-family: 'Helvetica', sans-serif;
  font-size: 27px;
  line-height: 60px;
}
.flexsearch--input:focus {
  outline: none;
  border-color: #2288bb;
}
.flexsearch--input:focus.flexsearch--submit {
  color: #333;
}
.flexsearch--submit:hover {
  color: #2288bb;
  cursor: pointer;
}
::-webkit-input-placeholder {
color: #888;
}
input:-moz-placeholder {
  color: #888
}
</style>

Back to the Post

Code 5: For this Style copy the code:-
Add Search Box Code 5
<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>
.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 60px 0 0; /* Right padding for submit button width */
overflow: hidden;
}
.flexsearch--input {
  width: 100%;
}
.flexsearch--input {
  -webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
  height: 20px;
  padding: 0 46px 0 10px;
border-color: #888;
  border-radius: 32px; /* (height/2) + border-width */2
  border-style: solid;
border-width: 2px;
  margin-top: 2px;
  color: #333;
  font-family: 'Helvetica', sans-serif;
font-size: 20px;
-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: 2px; /* border-width */
background: transparent;
  color: #888;
  font-family: 'Helvetica', sans-serif;
  font-size: 27px;
  line-height: 60px;
}
.flexsearch--input:focus {
  outline: none;
  border-color: #2288bb;
}
.flexsearch--input:focus.flexsearch--submit {
  color: #333;
}
.flexsearch--submit:hover {
  color: #2288bb;
  cursor: pointer;
}
::-webkit-input-placeholder {
color: #888;
}
input:-moz-placeholder {
  color: #888
}
</style>

Back to the Post