Coloring Google's Search Field

Sitepoint Members,
The submit button below does have a blue background with white letters. I’ve been trying to get the field for the text blue and the text being typed white and I can’t get it to those colors.

<form action=“http://www…searchresults.html” id=“cse-search-box”>
<div><input type=“hidden” name=“cx” value=“009478971803505951972:l1rvmz2xync” />
<input type=“hidden” name=“cof” value=“FORID:9” />
<input type=“hidden” name=“ie” value=“UTF-8” />
<input type=“text” name=“q” size=“44” title=“Enter Terms” />
<input class=“submit” type=“submit” name=“sa” value=“Submit” /></div></form>
<script type=“text/javascript”
src=“http://www.google.com/coop/cse/brand?form=cse-search-box&#038;lang=en”></script>

The last <input> is the submit button.
The second to last <input> is the field for typing in your search terms.

CSS:
input.submit{background-color:#3f3f7f;color:#fff}

I tried changing
<input type=“text” name=“q” size=“44” title=“Enter Terms” />
To
<input class=“text” type=“text” name=“q” size=“44” title=“Enter Terms” />

for CSS
input.text{background-color:#3f3f7f;color:#fff}

but it didn’t work. Is it possible to change that google text field?

Thanks,

Chris

It should work (it works for me). You might be better off using background: #3f3f7f rather than background-color: #3f3f7f. But apart from that, adding a class and those styles should do just what you want. Or you could also leave out the class and do

input[type="text"] {background:#3f3f7f;color:#fff}

though that won’t work on some older browsers.

Ralph,
I tried
<input class=“text” type=“text” name=“q” size=“44” title=“Enter Terms” />
with
input.text{background:#3f3f7f}

and tried
<input class=“text” type=“text” name=“q” size=“44” title=“Enter Terms” />
with
input.text{background-color:#3f3f7f}

and neither worked in just trying to get the background color to blue, forgetting the text.

It looks like I’m going to have to leave it at
<input class=“text” type=“text” name=“q” size=“44” title=“Enter Terms” />
with
input.text{color:#3f3f7f}

Thanks,

Chris

That’s the most basic of CSS and it should work. Could you provide us with the full code with it not working? It’s most likely just some silly error (probably validation) taht’s causing it to not work :).

Ryan,
Search Form/box:
<form action=“http …searchrez.html” id=“cse-search-box”>
<div><input type=“hidden” name=“cx” value=“009478971803505951972:l1rvmz2jjyy” />
<input type=“hidden” name=“cof” value=“FORID:9” />
<input type=“hidden” name=“ie” value=“UTF-8” />
<input class=“text” type=“text” name=“q” size=“44” title=“Enter Terms” />
<input class=“submit” type=“submit” name=“sa” value=“Search” /></div></form>
<script type=“text/javascript”
src=“http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en”></script>

Here’s the results Form/box
<div id=“cse-search-results”></div>
<script type=“text/javascript”>
var googleSearchIframeName = “cse-search-results”;
var googleSearchFormName = “cse-search-box”;
var googleSearchFrameWidth = 595;
var googleSearchDomain = “www.google.com”;
var googleSearchPath = “/cse”
</script>
<script type=“text/javascript” src=“http://www.google.com/afsonline/show_afs_search.js”></script>

You know, I noticed that I don’t have anything in my css for id=“cse-search-box”

Thanks,

Chris

The JavaScript is pulling in a default Google style that is overriding your CSS:


<input type="text" title="Enter Terms" size="44" name="q" class="text" style="background: url(&quot;http://www.google.com/cse/intl/en/images/google_custom_search_watermark.gif&quot;) no-repeat scroll left center rgb(255, 255, 255);">

You could override it with this

input.text{background: #3f3f7f !important;color:#fff !important;}

but then there’s not real point in using the JS in the first place.

Ralph,
Any idea what cse-search-box is for?

Thanks,

Chris

It’s a hook for the JavaScript code that the Google link pulls in. That little bit of JS pulls in a ton of stuff that searches the form for that id so it knows what to operate on.


(function() {
var f = document.getElementById('cse-search-box'); 

etc...

Being an educated guess, I’d guess all the results gets put into that element. Though I’d need to see the site online to have a better idea of what it’s used for (my guess is based off the limited Javascript code provided) :).

The code provided is all that’s needed. If you run it in your browser, it pulls in JS code from Google that places a Google logo image in the search box and colors the input white. !important overrides that, but basically kills the point of having the JS in the first place, too (as far as I can see).

Yeah but id=“cse-search-box” is html asking for css and I have no css for the html. Are you saying the css is at google?

IDs are for JS as well as CSS, and the JS needs the id to know what element to look for. But yes, Google’s code also adds some CSS in there as well. It’s all pulled in from Google by the JS.

The Google CSS looks like this:


element.style {
    background: url("http://www.google.com/cse/intl/en/images/google_custom_search_watermark.gif") no-repeat scroll left center #FFFFFF;
}

ok.

Thanks Ralph