Customizing your Google Search Bar using CSS

Are you tired of the boring look of the Google Search Bar on your blog? Is it consuming too much space from your sidebar or maybe it doesn't fit the theme of your blog? Here's a quick way on how to modify your search bar to make it sleeker.

Go ahead and open the Page Element with the code for your search bar and I'll guide you on how to edit it.

1. First, copy the code and paste it into notepad in case we mess things up. Hehehe.

2. Create your own search button image or get one from the web. Or you could use mine here. Take note of its dimensions. Mine is 18 x 18.

3. Then we have to make sure that the search button is right beside the input text field.

This is how the code for the input text field usually looks like:

<input type="text" size="31" maxlength="255" name="q" />

It should be followed by the search button code that usually looks like this:

<input type="submit" name="sa" value="Search" />

4. Enclose them in a div with the following styles:

• width = should be less than sidebar width. My sidebar has a width of 210px so I set the div width to 195px
• height = should be the same as that of your search button image. Mine is 18px.
• background-color = should be the same as the color of your input text field. Mine is white (#FFF).
• margin-top = space between the top element and your search box. I don't want my search box to touch the header so I used 9px. Experiment with this value but try 0 first.
  

So the code now looks like this:

<div style="width: 195px; margin-top: 9px; height: 18px; background-color: #FFF;">
<input type="text" size="31" maxlength="255" name="q" />
<input type="submit" name="sa" value="Search" /></div>

5. Time to edit the input text field with the following styles.

• border = 0. Removes the border of a standard text field.
• float = left
• width = 171px. Do not use the size property so make sure to remove that.
• margin-left = 3px. So >he text that you will be typing won't touch the edge.
  

Here's how it looks like now:

<div style="width: 195px; margin-top: 9px; height: 18px; background-color: #FFF;">
<input style="border:0; float:left; width:171px; margin-left:3px;" type="text" maxlength="255" name="q" />
<input type="submit" name="sa" value="Search" /></div>

6. Edit the search button to use your own image instead. Provide the URL to your image. Then include its width and height and set its style to float right.

So here it is now using my own image:

<div style="width: 195px; margin-top: 9px; height: 18px; background-color: #FFF;">
<input style="border:0; float:left; width:171px; margin-left:3px;" type="text" maxlength="255" name="q" />
<input style="float:right" type="image" src="http://lh6.ggpht.com/pinoywebsurfer /SCkFkb8bXKI/AAAAAAAAANo/h-bjqIjk-P8/go2.gif" width="18" height="18" name="sa" value="Search" /></div>

7. That's it. If you want to have a pre-defined value (e.g. Search) in your text box like mine, just add value="Search" in your input text code.

Hope this guide helped you. Of course, with adequate knowledge of CSS you can create different styles for your search bar.

Thanks to d'bug's guide for showing me how to do it in the first place. Let me know if you're having trouble implementing this.