[How-To] Make a search box with Pure CSS for blogger!

If you are blogging, your blog is not complete without a search box. A search bar allows visitors to easily search content on your blog, and is certainly necessary. In this tutorial, I will teach you how to make a custom search bar for your site with pure CSS.

<style>
#devil-search-btn {
background:#0099ff;
color:white;
font: 'trebuchet ms', trebuchet;
padding:10px 20px;
border-radius:0 10px 10px 0;
-moz-border-radius:0 10px 10px 0;
-webkit-border-radius:0 10px 10px 0;
-o-border-radius:0 10px 10px 0;
border:0 none;
font-weight:bold;
}
#devil-search-box {
background: #eee;
padding:10px;
border-radius:10px 0 0 10px;
-moz-border-radius:10px 0 0 10px;
-webkit-border-radius:10px 0 0 10px;
-o-border-radius:10px 0 0 10px;
border:0 none;
width:160px;
}
</style>


<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="devil-search-box" name="q" size="40" type="text" placeholder=" Search any Keyword "/>
<input id="devil-search-btn" value="Search" type="submit"/>
</form>


How To use it

You have two ways of using this code.You can either paste this code where you want in edit html. 
Or, you can paste this code in a HTML/TEXT widget. I have used the second way, and that is recommended. To do that - 

1. Click on ‘Layout’ tab. 
2. Add a gadget in the sidebar or any other place.
3. Paste all the code. 
4. Save, you are done.

Tip: It is recommended that you save it without a title, it will look better that way.

Customize!

It is quite easy to customize the code. I will be listing different ways you can, and how to. 

Customize colors

To change the colors of the search button, press Ctrl+f and type “background:#0099ff;” and replace the hex code (#0099ff) with a color of your choice. 

To change the colors of the search box, press Ctrl+f to search, and type “background: #eee;” and replace the hex code (#eee) with a color of your choice.

Change font

To change the button font, press ctrl+f to search, and type “font” and then replace the fonts after it (trebuchet ms, trebuchet). If you replace with a font like times new roman, remember to enclose times new roman in single quotes (‘).

Change search box default text

To change the default text, search for “placeholder=”  Search any Keyword ”/>” and replace the text after placeholder= with your choice. It is recommended that you leave some spaces before the word, like I have done.

Change search box width

Just search for “width:160px;” and edit the number after width: , with the width of your choice. Remember, it is in pixels.

---

If you need anymore help, don’t hesitate to drop a comment. I will surely help you.

Also, if you liked it, please include a link to my blog in your blogroll. I will surely link back