Help Archive

Custom Responsive Search Box Styles For Blogger

Onsite search boxes are an important element of every website. When you have loads of content and would like your visitors to quickly dig through pages and find exactly what they were looking for, search boxes come in really handy.

Blogger allows users to quickly add a simple search box from the list of available gadgets. The default search box looks fine on most sites, however you can even add a custom search box to blogger and apply any style that goes with your blog scheme. The only thing that you need is some HTML/CSS know-how and a bit of time.

To make things easy for you, here we have included a collection of free pre-styled search boxes that would go well with almost any website design. The best thing is that these are fluid width, responsive search boxes which will adjust to all screen sizes.

Manually Adding Search Box:

The following code will add a search box to blogger. You can grab the code and add a new JavaScript/Text Gadget and then paste the code there.

<form action='/search' autocomplete='off' id='searchbox' method='get'>
<input name='q' placeholder="Search" type='text'/><button type="submit">Search</button>
</form>

Different Style Search Boxes For Blogger:

Here are a couple of search bar styles you can choose from for your blog. Simply grab one of the codes below and add it where you like.

Custom Search box Style 1

<div class='search-box'>
<style>
.box {
    height: 115px;
    background: #FFF;
}
.searchbg {
    position: relative;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
#search-input:focus, #search-input:active {
    outline: none;
}
.searchbg:before, .searchbg:after {
    content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
#sbutton {
    background: rgba(248, 248, 248, 0.41);
    border: 0;
    font-weight: bold;
    font-size: 14px;
}
.search-field {
    width: 69%;
    border: 0;
    border-bottom: 1px dashed rgb(232, 232, 232);
    padding-left: 10px;
    font-family: arial;
    font-size: 13px;
    background: transparent;
}
#searchbox {
    padding: 44px 0;
    text-align: center;
}
</style>
<div class="box searchbg">
<form action='/search' autocomplete='off' id='searchbox' method='get'>
<input class='search-field' id='search-input' name='q' placeholder="I'm looking for..." type='text'/><button id="sbutton" type="submit">Search</button>
</form>
</div>
</div>

Custom Search box Style 2

<div class='search-box'>
<style>
#search-input {
    float: left;
    width: calc(100% - 40px);
    width: -moz-calc(100% - 40px);
    padding: 10px 5px 5px;
    margin-top: 5px;
    margin-left: 2px;
    border: 1px solid rgb(153, 153, 153);
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    border-radius: 4px;
    -webkit-box-shadow: rgb(204, 204, 204) 0px 5px 0px inset, rgb(152, 152, 152) 0px 6px 0px inset, rgb(223, 222, 222) 0px 11px 0px inset;
    box-shadow: rgb(204, 204, 204) 0px 5px 0px inset, rgb(152, 152, 152) 0px 6px 0px inset, rgb(223, 222, 222) 0px 11px 0px inset;
    font-size: 14px;
}
#search-input:focus, .search-button:focus {
    outline: none;
}
.search-button {
    float: left;
    cursor: pointer;
    padding: 4px 5px;
    margin-left: 4px;
    background-color: #f8b838;
    color: rgba(134, 79, 11, 0.8);
    text-transform: uppercase;
    font-weight: bold;
    border: 1px solid #99631d;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(84, 76, 67, 0.9);
    -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;
    -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;
    box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;
    -webkit-transition: background 0.2s ease-out;
    margin-top: 5px;
    font-size: 14px;
}
.search-button:active {   
    background: #f6a000;   
    position: relative;   
    top: 3px;   
    border: 1px solid #702d00;   
    -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;   
    -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;   
    box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;
}
.sb-container{
    height: 52px;
    background: #f2f2f2;
    padding: 0px 10px;
    border: 1px solid #D6D6D6;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 11px 0 #dfdede;
    -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 11px 0 #dfdede;
    box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 11px 0 #dfdede;
}
</style>
<div class='sb-container'>
    <form action='/search' autocomplete='off' id='searchbox' method='get'>
        <span><input class='search' id='search-input' name='q' placeholder='' type='text'/><input class="search-button" type="submit" value="Go"/></span>
    </form>
</div>
</div>

Custom Search box Style 3

<div class='search-box'>
<style>
#search-area {
    background: #ffffff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_ITWFliUBFZZsP390C-XTo_erLydFuUmw8MtPx0x4TdvBi1vxyWqR3c0Zdrft_-iCsTthJMobijd2eSLzYUVYfK4djHVDAirbieIvLNAHCwEA8KgJLF7yKenkdcTKd5Tbd9xTX4tXmwc/s1600/search-input-bg.png') no-repeat;
    height: 52px;
}
#search_field {
    margin-top: 8px;
    margin-left: 12px;
    outline: 0;
    border: 0;
    padding: 2px 0;
    height: 38px;
    float: left;
    width: calc(100% - 70px);
    width: -moz-calc(100% - 70px);
}
#search_submit {
    background: #ffffff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTFhEk1LRcMAOoYg8aUeGr0CsRkfhGW3X_RsOFnFWbhaGLRHabIqfpaslh1f-TD73i4hEOreApokKMcQ8HmeUJJMtSp_1mhyB7OaGqILW0MlR9uaIWUkaayyWRPXas_hn4CduCSVTgBPA/s1600/search-input-btn.png') no-repeat -1px -1px;
    background-size: 56px 40px;
    border: 0;
    width: 58px;
    height: 38px;
    margin-top: 8px;
    float:right;
}
#search_submit:active, #search_submit:focus {
    border: 0;
    outline:0;
}
</style>

<div id="search-area">
    <form expr:action="/search" method="get">
        <input autocomplete="off" type="text" name="q" placeholder="Search..." id="search_field"/>
        <input type="submit" id="search_submit" value=""/>
    </form>
</div>
</div>

Search box Style 4

<div class='search-box'>
<style>
.form-wrapper {
    padding: 8px;
    background: rgba(220, 220, 220, 0.2);
    border-radius: 3px;
    box-shadow: 0 -1px 1px rgba(0,0,0,.2) inset;
}
.form-wrapper input {
    border: 0;
    padding: 10px 5px;
    float: left;
    font: normal 13px 'arial', sans-serif;
    background: #FFF;
    border-radius: 3px 0 0 3px;
    position: absolute;
    width: calc(100% - 106px);
    width: -moz-calc(100% - 106px);
}
.form-wrapper input:focus {
    outline: 0;
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
}
.form-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}
.form-wrapper button {
    overflow: visible;
    position: relative;
    float: right;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 37px;
    width: 62px;
    font: bold 13px 'arial' sans-serif;
    color: #fff;
    background: #454545;
    border-radius: 0 3px 3px 0;
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}
.form-wrapper button:hover{     
    background: #454545;
}   
.form-wrapper button:active,
.form-wrapper button:focus{   
    background: #454545;
    outline: 0;   
}
.form-wrapper button:before {
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #639B71 transparent;
    top: 12px;
    left: -8px;
}
.form-wrapper button:hover:before {
    border-right-color: #639B71;
}
.form-wrapper button:focus:before,
.form-wrapper button:active:before {
    border-right-color: #639B71;
}      
.form-wrapper button::-moz-focus-inner {
    border: 0;
    padding: 0;
}    
.cf:before, .cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
.cf {
    zoom:1;
} 
</style>
<form class="form-wrapper cf" action='/search' autocomplete='off' id='searchbox' method='get'>
<input class='search-field' id='search-input' name='q' placeholder="I'm looking for..." type='text'/><button type="submit">Search</button>
</form>
</div>

These search boxes are responsive and will adjust automatically to any template style. You can either simply grab the code and use it in a new HTML/JavaScript widget or paste the code in your template to display anywhere you feel appropriate.