Can the Google AdSense Search Tool background be changed?

Digging around in the Google world, I've decided that you're talking about what Google calls the Adsense Search Box, not the Google Toolbar, because the latter has no relationship to the AdSense program, as far as I can tell. Which means that for this answer to have any meaning, you'll need to have already signed up for an AdSense account. But you probably should anyway, because even if it's just $20/month, you could be earning a few dollars from your Web site instead of always paying, paying, paying for hosting!

Advertisement over. Let's get down to specific details!

To get to the Google AdSense search box, you need to log in to AdSense, then click on "Search Settings", which will give you a pretty complex configuration form to fill out that includes "search box background color", though the only choices are white, black and gray. We can do better than that, however!

Here's the default Google search box configured for my own account (which is kinda cool: if you search with it, then click on one of the resultant ads on the results page, I'll see a small % of the transaction.):

There's a lot of code there to look at:

<!-- Search Google -->
<center>
<form method="get" action="http://www.google.com/custom" target="_top">
<table bgcolor="#cccccc">
<tr><td nowrap="nowrap" valign="top" align="left" height="32">
<a href="http://www.google.com/">
<img src="http://www.google.com/logos/Logo_25gry.gif" border="0" 
  alt="Google" align="middle"></img></a>
<input type="text" name="q" size="40" maxlength="255" value="">
  </input>
<input type="submit" name="sa" value="Search"></input>
<input type="hidden" name="client" value="pub-7950118917489847"></input>
<input type="hidden" name="forid" value="1"></input>
<input type="hidden" name="channel" value="9514164789"></input>
<input type="hidden" name="ie" value="ISO-8859-1"></input>
<input type="hidden" name="oe" value="ISO-8859-1"></input>
<input type="hidden" name="hl" value="en"></input>
</td></tr></table>
</form>
</center>
<!-- Search Google -->

The key elements for what we want to tweak, however, are associated with the table that's used to wrap all the content. You can see it on line four: <table bgcolor='#cccccc'>. That sets our grey background. So, to change it to another color, simply replace the "#cccccc" with the RGB hex equivalent. If you need a cheat sheet, you might check out my Web Color Chart.

In many, though not all, browsers, you can also change the color of buttons and input elements through use of Cascading Style Sheet inline specifications. Let's do something weird: let's make the background for the search box yellow, with a small red border (again, using CSS), have the button bright green and the background of the text input box itself pink. (Note: no actual colors were harmed in the production of this example. Don't try this at home. Professional color mixer.):

If you don't see all the colors, then be thankful that your browser isn't fully CSS compliant. Just this once. If you're in a really up-to-date browser like FireFox, though, you'll see the world's most colorful search box.

To accomplish the color changes, I changed the bgcolor attribute of the table tag and added three style= attributes to the appropriate HTML tags. Rather than duplicate all the code again, here are just the relevent few lines:

<table bgcolor="#ffff99" style="border:4px double #900">
...
<input type="text" name="q" size="40" maxlength="255"
  value="" style="background-color:#fcf;"></input>
<input type="submit" name="sa" value="Search"
  style="background-color:#6c3;"></input>

By the way, let me kvetch about one thing: Google, there is no </input> tag. The input tag doesn't have a paired closing tag and if you want to be producing proper XHTML you should be using <input .... /> instead.

Anyway, other than the frightening color scheme in this example, that should give you all the information you need to customize the Google search box for your own site!