6+ CSS3 Stylish Search box Widgets for Blogger

- May 03, 2018
Are you looking for stylish search box for your blog that looks quite professional? Yes of course! I might be able to help you as I designed following below search widgets (using CSS3 and HTML5) for your blogger site. A few months ago, I searched for custom designed search bar on Google and found a number of different stylish and beautiful search boxes, but all were created by using old techniques. When I used one of those, I wondered to see that:
  • That was not responsive
  • That was only a image (used as background) that looks pretty.
  • That was not created by using exact method.
  • The inner design of input were not described.
Oh, I'm not here to discuss other's mistakes, Actually, that were really good and created with great struggle. But, in this modern age, that's widgets are no more acceptable by the advanced blogger users.
According to your choice, I build a few search box design using CSS3 and HTML all are responsive and I used Font Awesome icon (in some search gadgets) instead of image icon (great benefit is that no loading, still HD at zoomed screen).
These Search boxes have following features:
  • Esay to customizable
  • Easily readable source code
  • Easy to modify
  • Perfect for side bar widget
  • Best user experience with:
    1. Shadow Effects
    2. Input Focus Effects
    3. Button Hover Effects
  • Design supported by all modern Browsers
  • Ready in Mobile view
  • Valid syntax without any bugs

How to use on your Blog

First of all choose your favorite search box code and follow the following steps.
Login 》Blogger Dashboard 》Layout 》Add a Gadget 》HTML/Javascript.

Then copy and paste the code of your favorite search widget into HTML/Javascript content's box and save.
You have done ! Now It's time to let me know if you have successfully completed and checked custom search result page.

Simple Clean Search Bar

simple clean blogger search widget
<style>
/*Simple Clean Search Box by CodeHim*/
/* Remove the following import url line if you have already installed Adobe Font Awesome Icons*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"); 
/*Removable*/

.codehim-search {
 padding: 10px;
 box-sizing: border-box;
}

.codehim-search input[type=text] {
 width: 60%;
 padding: 14px;
 display: inline;
 background: #fff;
 border: 1px solid #e41b17;
 outline: 0;
 color: #444;
 caret-color: #e41b17;
 font-size: 12pt;
}

.codehim-search input[type=submit]:hover {
 opacity: .8;
}

.codehim-search input[type=text]:focus {
 background: #f5f5f5;
}

.codehim-search-button {
 padding: 15px;
 display: inline;
 border: none;
 outline: 0;
 background: #e41b17;
 color: #fff;
 margin-left: -5px;
 cursor: pointer;
 transition: .3s;
 -webkit-transition: .3s;
 -moz-transition: .3s;
 font-size: 12pt;
}

.codehim-search-button:before {
 content: "\f002";
 font-family: FontAwesome;
 font-weight: normal;
}
</style>

<div class='codehim-search'>
<form action="/search/max-results=8">                         
<input type='text' autocomplete="off" name="q" placeholder="Type to search"/>
                           <button type="submit" value="Search" class="codehim-search-button"> </button>
                        </form>
</div>

Clean Blue Search Box

Clean blue search widget
<style>
/*Clean Blue Search Box by codehim.com*/
.codehim-search-bar {
 padding: 10px;
 box-sizing: border-box;
}

.codehim-search-bar input[type=text] {
 width: 60%;
 padding: 14px;
 display: inline;
 background: #fff;
 border: 1px solid #357EC7;
 outline: 0;
 color: #444;
 caret-color: #357EC7;
 font-size: 12pt;
}

.codehim-search-bar input[type=submit]:hover {
 opacity: .8;
}

.codehim-search-bar input[type=text]:focus {
 background: #f5f5f5;
}

.codehim-search-bar input[type=submit] {
 padding: 15px;
 display: inline;
 border: none;
 outline: 0;
 background: #357EC7;
 color: #fff;
 margin-left: -5px;
 cursor: pointer;
 transition: .3s;
 -webkit-transition: .3s;
 -moz-transition: .3s;
 font-size: 12pt;
 border-radius: 0 10px 10px 0;
}

.codehim-search-button:before {
 content: "\f002";
 font-family: FontAwesome;
 font-weight: normal;
}

</style>
<div class='codehim-search-bar'>
   <form action="/search/max-results=8" target="_top">                          
      <input type='text' id="TypeNow" autocomplete="off" oninput="undisableBtn()" name="q" placeholder="Search here..."/>
      <input type="submit" value="Search" /> 
   </form>
</div>

Cute Search Box

Cute stylish search box
<style>
/* Cute Search Box by CodeHim.Com*/
.codehim-cute-bar {
 padding: 10px;
 box-sizing: border-box;
}

.codehim-cute-bar input[type=text] {
 color: #F6358A;
 caret-color: #000;
 font-size: 10pt;
 width: 60%;
 padding: 14px;
 display: inline;
 background: #fff;
 border: 1px solid #ccc;
 outline: 0;
}

.codehim-cute-bar input[type=submit]:hover {
 box-shadow: 1px 2px 6px #444;
 color: #F6358A;
 background: #fff;
}

.codehim-cute-bar input[type=text]:focus {
 background: #f5f5f5;
}

.codehim-cute-bar input[type=submit] {
 padding: 15px;
 display: inline;
 border: none;
 outline: 0;
 background: #F6358A;
 color: #fff;
 margin-left: -5px;
 cursor: pointer;
 transition: .3s;
 -webkit-transition: .3s;
 -moz-transition: .3s;
 font-size: 10pt;
 font-weight: 700;
}

</style>
<div class='codehim-cute-bar'>
   <form action="/search/max-results=8" target="_top">                          
      <input type='text' id="TypeNow" autocomplete="off" oninput="undisableBtn()" name="q" placeholder="Find topic now..."/>
      <input type="submit" value="Search" /> 
   </form>
</div>

Rounded Corner Stylish Search Bar

rounded corner with circle button search bar
<style>
/* Rounded Responsive Search Box by CodeHim.com*/
/* Remove this line if you have already installed Adobe Font Awesome Icons*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"); 
/*Removable*/

.search-area {
 background: #f2f2f2;
 padding: 10px;
 border: 1px solid #f3f3f3;
 margin: 10px;
 text-align: center;
 border-radius: 10px;
}

.codehim-ss-bar {
 padding: 10px;
 box-sizing: border-box;
}

.codehim-ss-bar input[type=text] {
 color: #444;
 caret-color: #000;
 font-size: 10pt;
 width: 80%;
 padding: 13px;
 display: inline;
 background: #fff;
 border: 1px solid #e6e6e6;
 outline: 0;
 border-radius: 30px 0 0 30px;
}

.codehim-circle-search-button:hover {
 box-shadow: 1px 2px 6px #444;
 color: #3EA055;
 background: #fff;
}

.codehim-ss-bar input[type=text]:focus {
 background: #fff;
 box-shadow: 1px 2px 8px #3EA055;
}

.codehim-circle-search-button {
 display: inline-block;
 margin-left: -33px;
 border: none;
 outline: 0;
 background: #3EA055;
 color: #fff;
 width: 50px;
 height: 50px;
 cursor: pointer;
 transition: .3s;
 -webkit-transition: .3s;
 -moz-transition: .3s;
 font-size: 14pt;
 border-radius: 50%;
}

.codehim-circle-search-button:before {
 content: "\f002";
 font-family: FontAwesome;
 font-weight: normal;
}
</style>
<div class='search-area'>
   <div class='codehim-ss-bar'>
      <form action="/search/max-results=8" target="_top">                          
         <input type='text' id="TypeNow" autocomplete="off" oninput="undisableBtn()" name="q" placeholder="Find topic now..."/>
         <button type="submit" class="codehim-circle-search-button"> </button>
      </form>
   </div>
</div>

Block Stylish Search Widget

block design search box
<style>
/* Search Block by CodeHim.com*/
/* Remove this line if you have already installed Adobe Font Awesome Icons*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"); 
/*Removable*/

.block-search-outter {
 padding: 15px;
 margin: 20px;
 background: #f2f2f2;
 text-align: center;
}

.codehim-block-search {
 padding: 10px;
 box-sizing: border-box;
}

.codehim-block-search input {
 padding: 12px;
 display: block;
 outline: 0;
 font-size: 12pt;
}

.codehim-block-search input[type=text] {
 background-color: #fff;
 background-size: 30px;
 border: 1px solid #ddd;
 color: #444;
 caret-color: #e41b17;
 width: 80%;
}

.codehim-block-search-btn:hover {
 background: #666;
}

.codehim-block-search input[type=text]:focus {
 background: #f5f5f5;
}

.codehim-block-search-btn {
 background: #e600e6;
 width: 50%;
 margin-left: 0;
 color: #fff;
 padding: 10px;
 display: block;
 outline: 0;
 border: none;
 font-size: 12pt;
 cursor: pointer;
 transition: .3s;
 -webkit-transition: .3s;
 -moz-transition: .3s;
 font-size: 12pt;
}

.codehim-block-search-btn:after {
 content: "\f054";
 font-family: FontAwesome;
 font-weight: normal;
 margin-left: 10px;
}
</style>
<div class='block-search-outter'>
   <div class='codehim-block-search'>
      <form action="/search/max-results=8" target="_top">
         <input type='text' autocomplete="off" name="q" placeholder="Type to search"/>
         <button type="submit" class="codehim-block-search-btn"> Search </button>
      </form>
   </div>
</div>

Technology Blog Search Gadget

technology search box gadget
<style>
/* Technology Blog Search Box by CodeHim.com */
.tech-outter {
 padding: 15px;
 margin: 20px;
 background: #7BCCB5;
 text-align: center;
 border-radius: 10px;
}

.codehim-tech-search {
 padding: 10px;
 box-sizing: border-box;
}

.codehim-tech-search input {
 padding: 12px;
 display: inline;
 outline: 0;
 font-size: 12pt;
}

.codehim-tech-search input[type=text] {
 background: #fff;
 border: none;
 color: #307D7E;
 box-shadow: -15px -15px rgba(0, 0, 0, .15);
 caret-color: #307D7E;
 width: 60%;
}

.codehim-tech-search input[type=submit]:hover {
 background: #3EA99F;
 box-shadow: 0px 0px rgba(0, 0, 0, .15);
}

.codehim-tech-search input[type=text]:focus {
 background: #fff;
 outline: 0;
 box-shadow: 0px 0px rgba(0, 0, 0, .15);
}

.codehim-tech-search input[type=submit] {
 background: #307D7E;
 color: #fff;
 box-shadow: 15px 15px rgba(0, 0, 0, .15);
 display: inline;
 outline: 0;
 border: none;
 font-size: 12pt;
 cursor: pointer;
 transition: .3s;
 -webkit-transition: .3s;
 -moz-transition: .3s;
 font-size: 12pt;
}
</style>
<div class='tech-outter'>
   <div class='codehim-tech-search'>
      <form action="/search/max-results=8" target="_top">
         <input type='text' autocomplete="off" name="q" placeholder="Type to search"/>
         <input type="submit" value="Search" />
      </form>
   </div>
</div>
Feel free to edit, customize and change the source code according to your needs.
 

Start typing and press Enter to search