Add These Stylish Custom Search Box To Blogger
The search box is a must for all websites . Because the search box are the advantages for both you and your visitors.
There are hundreds of blogs posts , which posts your visitors find it difficult. Search box enhances the look of your website , as well as helps your visitors find the posts.
Blogger gadget you can also add search box, But Blogger have simple search box , which does not look good is your blog.
You can easily add customize CSS3 search box to your Blogger Blog that match your blog's template.
How to add stylish custom search box to blogger blog.
How to add stylish custom search box to blogger blog.
- Log in your blogger dashboard
- select blog
- Go to layout
- Go to Add A Gadget
- Choose HTML/Java Script
- Past the code of search box into empty box
These stylish search box you can add to your Blogger blog.
<style>
#searchbox {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJeNWEoVbv4zj3jaLL9HMZEPl67fx8o_0z05j8iFf2AJ-q3V__Phft2GLqL9cnV56JehAtzd4qR3e6d6lG4bQ9VO-EIuhuiLcralxfEDsLLxqXS2iMmiL44zLFkqb5gJBm8wlkJCQzFw4/s1600/Untitledvjjj.png) no-repeat;
width: 204px;
height: 45px;
}
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: transparent;
margin: 3px 0px 0px 20px;
padding: 10px 0px 6px 0px;
border-width: 0px;
font-family: "Arial Narrow", Arial, sans-serif;
font-size: 14px;
color: #FF0066;
width: 66%;
display: inline-table;
vertical-align: top;
}
#button-submit {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw2CYTLSKyNOo_6ia-cdmS-gf4M8az07GIHjkrPSvELlMgUF2g5g37MdSozOhJUef03mP-g1hd_IfeiOQMXWY47pCiEzqUqaSmBVJvpsQ3jgga-rkevNZJjlEYWY2o6eDnbBb4gmOKAuE/s1600/Untitledvjjj.png) no-repeat;
border-width: 0px;
cursor: pointer;
margin-left: 2px;
margin-top: 11px;
margin-bottom: 10px;
width: 23px;
height: 23px;
}
#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil4UJxQUQ4TzWhvvKi86uk2CKilRPsGvmJj6SHr5xPHqWA2NIc9c9G9Izt1H9kk-vdxQOJItzxOgm8FKKlmfTbuBkNQRC61nn8dp2sM593ZMcbMqPmovaC5P6D8nlbir302yDa68_Gfs8/s1600/Untitledvjjj.png) no-repeat;
}
#button-submit:active {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw2CYTLSKyNOo_6ia-cdmS-gf4M8az07GIHjkrPSvELlMgUF2g5g37MdSozOhJUef03mP-g1hd_IfeiOQMXWY47pCiEzqUqaSmBVJvpsQ3jgga-rkevNZJjlEYWY2o6eDnbBb4gmOKAuE/s1600/Untitledvjjj.png) no-repeat;
outline: none;
}
#button-submit::-moz-focus-inner {
border: 0;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="search Here..." />
<input id="button-submit" type="submit" value="" />
</form>
#searchbox {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJeNWEoVbv4zj3jaLL9HMZEPl67fx8o_0z05j8iFf2AJ-q3V__Phft2GLqL9cnV56JehAtzd4qR3e6d6lG4bQ9VO-EIuhuiLcralxfEDsLLxqXS2iMmiL44zLFkqb5gJBm8wlkJCQzFw4/s1600/Untitledvjjj.png) no-repeat;
width: 204px;
height: 45px;
}
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: transparent;
margin: 3px 0px 0px 20px;
padding: 10px 0px 6px 0px;
border-width: 0px;
font-family: "Arial Narrow", Arial, sans-serif;
font-size: 14px;
color: #FF0066;
width: 66%;
display: inline-table;
vertical-align: top;
}
#button-submit {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw2CYTLSKyNOo_6ia-cdmS-gf4M8az07GIHjkrPSvELlMgUF2g5g37MdSozOhJUef03mP-g1hd_IfeiOQMXWY47pCiEzqUqaSmBVJvpsQ3jgga-rkevNZJjlEYWY2o6eDnbBb4gmOKAuE/s1600/Untitledvjjj.png) no-repeat;
border-width: 0px;
cursor: pointer;
margin-left: 2px;
margin-top: 11px;
margin-bottom: 10px;
width: 23px;
height: 23px;
}
#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil4UJxQUQ4TzWhvvKi86uk2CKilRPsGvmJj6SHr5xPHqWA2NIc9c9G9Izt1H9kk-vdxQOJItzxOgm8FKKlmfTbuBkNQRC61nn8dp2sM593ZMcbMqPmovaC5P6D8nlbir302yDa68_Gfs8/s1600/Untitledvjjj.png) no-repeat;
}
#button-submit:active {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw2CYTLSKyNOo_6ia-cdmS-gf4M8az07GIHjkrPSvELlMgUF2g5g37MdSozOhJUef03mP-g1hd_IfeiOQMXWY47pCiEzqUqaSmBVJvpsQ3jgga-rkevNZJjlEYWY2o6eDnbBb4gmOKAuE/s1600/Untitledvjjj.png) no-repeat;
outline: none;
}
#button-submit::-moz-focus-inner {
border: 0;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="search Here..." />
<input id="button-submit" type="submit" value="" />
</form>
<style>
#searchbox {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimTrgWzDDxlIAdIyZG0G39OeupGXnRKV-tbZHjC8Cwb-P7ddg7jK98Gtspr8VjST2kw8sJRz70382M8MJOxxS-Ee24hy9w1JtZLlx8v3a_ZQpHxDI4GZCjvTp_copgmZJr9NcvVtQq-NM/s1600/bnbb.png) no-repeat; width: 280px;
height: 65px;
}
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: transparent;
padding: 0px 0px 0px 20px;
margin: 10px 15px 0px 0px;
border-width: 0px;
font-family: "Brush Script MT", cursive;
font-size: 12px;
color: #595959;
width: 65%;
font-weight: bold;
display: inline-table;
vertical-align: top;
}
#button-submit {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzWcxXeeDm8E_4FxOKKVriK2352c1p1ZUsecCwUlgnEZ5XUCkKVrEKLz45CF_DXDGyCptODPZ3REKFNJta5WIHvDiB2DGB3_hQBSMyS4gsUU9PAwhdmJn2HyNfL8sUI__oTqQ03yPXxPs/s1600/bnbb1.png) no-repeat;
border-width: 0px;
cursor: pointer;
margin-top: 0px;
width: 35px;
height: 35px;
}
#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7R-Ww4cc0yNxkNmvMY0Y3E5hQInwyPPsou2U0y3cEixSRVRj47punujF-zyxn3HwqHetgASDYLXRgdmGo9mAxkXXwVKFOVJcUTBLrxtG-xxXUeQIQHS3Ump5hbTwWFYdQE_yFlcAd7AY/s1600/bnbb2.png) no-repeat;
}
#button-submit:active {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzWcxXeeDm8E_4FxOKKVriK2352c1p1ZUsecCwUlgnEZ5XUCkKVrEKLz45CF_DXDGyCptODPZ3REKFNJta5WIHvDiB2DGB3_hQBSMyS4gsUU9PAwhdmJn2HyNfL8sUI__oTqQ03yPXxPs/s1600/bnbb1.png) no-repeat;
outline: none;
}
#button-submit::-moz-focus-inner {
border: 0;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input class="textarea" name="q" type="text" size="15" placeholder="Search here..." />
<input id="button-submit" type="submit" value="" />
</form>
#searchbox {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimTrgWzDDxlIAdIyZG0G39OeupGXnRKV-tbZHjC8Cwb-P7ddg7jK98Gtspr8VjST2kw8sJRz70382M8MJOxxS-Ee24hy9w1JtZLlx8v3a_ZQpHxDI4GZCjvTp_copgmZJr9NcvVtQq-NM/s1600/bnbb.png) no-repeat; width: 280px;
height: 65px;
}
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: transparent;
padding: 0px 0px 0px 20px;
margin: 10px 15px 0px 0px;
border-width: 0px;
font-family: "Brush Script MT", cursive;
font-size: 12px;
color: #595959;
width: 65%;
font-weight: bold;
display: inline-table;
vertical-align: top;
}
#button-submit {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzWcxXeeDm8E_4FxOKKVriK2352c1p1ZUsecCwUlgnEZ5XUCkKVrEKLz45CF_DXDGyCptODPZ3REKFNJta5WIHvDiB2DGB3_hQBSMyS4gsUU9PAwhdmJn2HyNfL8sUI__oTqQ03yPXxPs/s1600/bnbb1.png) no-repeat;
border-width: 0px;
cursor: pointer;
margin-top: 0px;
width: 35px;
height: 35px;
}
#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7R-Ww4cc0yNxkNmvMY0Y3E5hQInwyPPsou2U0y3cEixSRVRj47punujF-zyxn3HwqHetgASDYLXRgdmGo9mAxkXXwVKFOVJcUTBLrxtG-xxXUeQIQHS3Ump5hbTwWFYdQE_yFlcAd7AY/s1600/bnbb2.png) no-repeat;
}
#button-submit:active {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzWcxXeeDm8E_4FxOKKVriK2352c1p1ZUsecCwUlgnEZ5XUCkKVrEKLz45CF_DXDGyCptODPZ3REKFNJta5WIHvDiB2DGB3_hQBSMyS4gsUU9PAwhdmJn2HyNfL8sUI__oTqQ03yPXxPs/s1600/bnbb1.png) no-repeat;
outline: none;
}
#button-submit::-moz-focus-inner {
border: 0;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input class="textarea" name="q" type="text" size="15" placeholder="Search here..." />
<input id="button-submit" type="submit" value="" />
</form>
<style>
#searchbox {
background: #CC0099;
border: 5px solid #CC0099;
padding: 0px 0px;
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"] {
border-width: 1px;
border-style: solid;
border-color: #fff;
font: bold 14px Arial,Helvetica,Sans-serif;
color: #CC0033;
width: 63%;
padding: 8px 15px 8px 15px;
}
#button-submit {
background: #CC0099;
border-width: 0px;
padding: 9px 0px;
width: 22%;
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;
}
</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>
#searchbox {
background: #CC0099;
border: 5px solid #CC0099;
padding: 0px 0px;
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"] {
border-width: 1px;
border-style: solid;
border-color: #fff;
font: bold 14px Arial,Helvetica,Sans-serif;
color: #CC0033;
width: 63%;
padding: 8px 15px 8px 15px;
}
#button-submit {
background: #CC0099;
border-width: 0px;
padding: 9px 0px;
width: 22%;
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;
}
</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>
<style>
#searchbox{height: 40px;}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input[type="text"] {
background: #993399;
border: 0px;
font: 14px Arial,Helvetica,Sans-serif;
color: #fff;
width: 150px;
padding: 12px 17px 12px 20px;
-webkit-border-radius: 5px 0px 0px 5px;
-moz-border-radius: 5px 0px 0px 5px;
border-radius: 5px 0px 0px 5px;
-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;
margin-top: 0px;
}
#searchbox input[type="text"]:focus {
background: #FF9933;
border: 0px;
width: 200px;
}
#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbqvcvXuxbl0ucS1urK_xz3gcPCrN3RAVaV-Di89V0slFcrI_IcOvBDTDkYrjfBuksOkIYOSil2UpEkeiSDOBy0Fmo8m9uwFfAMvY-il4xMCr9UNKXBWnQkOo2hpc0q_89buwzLeFDnDI/s1600/bn2.png) no-repeat;
margin-top: 0px;
border-width: 0px;
width: 40px;
height: 41px;
cursor: pointer;
}
#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUKaZNsdi1JbplOfprZyoLa1hroWPPJdLLvQ27Y7c0aNsMsb0C4rofgf8STzIh4ot97m0KcXB6m6bxzvspQTzVi-b5FzBGIqXsfLfzGKvq8wJtMc5hxPgvNFNGnzNR9OcBCbolhjtaaTU/s1600/bn1.png) no-repeat;
}
</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>
#searchbox{height: 40px;}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input[type="text"] {
background: #993399;
border: 0px;
font: 14px Arial,Helvetica,Sans-serif;
color: #fff;
width: 150px;
padding: 12px 17px 12px 20px;
-webkit-border-radius: 5px 0px 0px 5px;
-moz-border-radius: 5px 0px 0px 5px;
border-radius: 5px 0px 0px 5px;
-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;
margin-top: 0px;
}
#searchbox input[type="text"]:focus {
background: #FF9933;
border: 0px;
width: 200px;
}
#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbqvcvXuxbl0ucS1urK_xz3gcPCrN3RAVaV-Di89V0slFcrI_IcOvBDTDkYrjfBuksOkIYOSil2UpEkeiSDOBy0Fmo8m9uwFfAMvY-il4xMCr9UNKXBWnQkOo2hpc0q_89buwzLeFDnDI/s1600/bn2.png) no-repeat;
margin-top: 0px;
border-width: 0px;
width: 40px;
height: 41px;
cursor: pointer;
}
#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUKaZNsdi1JbplOfprZyoLa1hroWPPJdLLvQ27Y7c0aNsMsb0C4rofgf8STzIh4ot97m0KcXB6m6bxzvspQTzVi-b5FzBGIqXsfLfzGKvq8wJtMc5hxPgvNFNGnzNR9OcBCbolhjtaaTU/s1600/bn1.png) no-repeat;
}
</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>
<style>
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: transparent;
border: 1px solid green;
font-family: "Arial Narrow", Arial, sans-serif;
font-size: 14px;
font-style: italic;
width: 200px;
color: green;
display: inline-table;
vertical-align: top;
height: 30px;
border-radius: 5px;
}
#button-submit::-moz-focus-inner {
border: 0;
}#button-submit {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJMzqYrpBG7ZdzmbCvjQAOrJmvjB1mVtwjDLJiLYboAgTIuBCWwLkbK3H-DVqF-LIajELrHHW5YAEh9PhUiTWeLSHn8Xk_gNJFkkLwWAywtyuGueOBgyDIFbmCljpbjoS7a0BXhHXqwEc/s1600/Untitledvhvh.png) no-repeat;
border-width: 0px;
cursor: pointer;
width: 35px;
height: 35px;
}
#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibAY7_3LQRaJfkzz3vwC0Moth_SHlZt8zkJpEYL1xWGL3bhdHbk709wYepQls5jIXkJDi1VQBreq-CTL8f2xgozqc5g-ku7igpN9wjA0LEbvWUys-e4briCfxoRue7yUOjbQsWDEL6jvU/s1600/Untitledvhvh2.png) no-repeat;
}
#button-submit::-moz-focus-inner {
border: 0;
}
</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>
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: transparent;
border: 1px solid green;
font-family: "Arial Narrow", Arial, sans-serif;
font-size: 14px;
font-style: italic;
width: 200px;
color: green;
display: inline-table;
vertical-align: top;
height: 30px;
border-radius: 5px;
}
#button-submit::-moz-focus-inner {
border: 0;
}#button-submit {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJMzqYrpBG7ZdzmbCvjQAOrJmvjB1mVtwjDLJiLYboAgTIuBCWwLkbK3H-DVqF-LIajELrHHW5YAEh9PhUiTWeLSHn8Xk_gNJFkkLwWAywtyuGueOBgyDIFbmCljpbjoS7a0BXhHXqwEc/s1600/Untitledvhvh.png) no-repeat;
border-width: 0px;
cursor: pointer;
width: 35px;
height: 35px;
}
#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibAY7_3LQRaJfkzz3vwC0Moth_SHlZt8zkJpEYL1xWGL3bhdHbk709wYepQls5jIXkJDi1VQBreq-CTL8f2xgozqc5g-ku7igpN9wjA0LEbvWUys-e4briCfxoRue7yUOjbQsWDEL6jvU/s1600/Untitledvhvh2.png) no-repeat;
}
#button-submit::-moz-focus-inner {
border: 0;
}
</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>
<style>
#searchbox {
width: 290px;
}
#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: 10px 13px #CC9966;
border: 0px solid #f2f2f2;
font: bold 14px Arial,Helvetica,Sans-serif;
color: #000;
width: 150px;
padding: 10px 15px 10px 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: #FF0099;
border: 0px solid #f7f7f7;
width: 200px;
padding-left: 10px;
}
#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQouedB3NtFHHA6t29FF0pe56rMW4gkNoC0ZEVm6RnspeN8pF2XQi-CcG7Sa0piug5DN2jB6ImmQ82zSCvKM3c1k2l8VHfR9e9-jp19_km8t21zfphyWEgPxdKdfojQa337JSDLk4ImEk/s1600/bnbb1.png) no-repeat;
margin-left: 0px;
border-width: 0px;
width: 60px;
cursor: pointer;
height: 33px;
}
#button-submit:hover{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbMa90TCa__a9RLF7hNelztOrQL0tBPhLonnalDrbGuiU0iyBMT2DeVXseuxM6fTqSPMed7SU1tf7L-qrHJKaFFed8fl6SpVYh790eJVRiWGHu5tZfVE8Bbv7XHWwItXJ-bEAE_yas-fY/s1600/bnbb1.png) no-repeat;}
</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>
#searchbox {
width: 290px;
}
#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: 10px 13px #CC9966;
border: 0px solid #f2f2f2;
font: bold 14px Arial,Helvetica,Sans-serif;
color: #000;
width: 150px;
padding: 10px 15px 10px 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: #FF0099;
border: 0px solid #f7f7f7;
width: 200px;
padding-left: 10px;
}
#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQouedB3NtFHHA6t29FF0pe56rMW4gkNoC0ZEVm6RnspeN8pF2XQi-CcG7Sa0piug5DN2jB6ImmQ82zSCvKM3c1k2l8VHfR9e9-jp19_km8t21zfphyWEgPxdKdfojQa337JSDLk4ImEk/s1600/bnbb1.png) no-repeat;
margin-left: 0px;
border-width: 0px;
width: 60px;
cursor: pointer;
height: 33px;
}
#button-submit:hover{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbMa90TCa__a9RLF7hNelztOrQL0tBPhLonnalDrbGuiU0iyBMT2DeVXseuxM6fTqSPMed7SU1tf7L-qrHJKaFFed8fl6SpVYh790eJVRiWGHu5tZfVE8Bbv7XHWwItXJ-bEAE_yas-fY/s1600/bnbb1.png) no-repeat;}
</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>