1 reply [Last post]
gidmeister's picture
Last seen: 7 years 11 weeks ago
Timezone: GMT-4
Joined: 2011-03-01
Posts: 47
Points: 93

I have put a Google search bar into my home page. But it is white, and the background is white, so it is hard to see. I can't just change the background of the webpage itself, because the customer is particular about that.
So I want to give a yellow background to the search bar
So I looked at the html generated by the script that google gives you, and it looks like this:

<td id="gs_tti50" class="gsib_a"><input autocomplete="off" type="text" size="10" class="gsc-input" name="search" title="search" id="gsc-i-id1" dir="ltr" spellcheck="false" style="width: 100%; padding: 0px; border: none; margin: 0px; height: auto; outline: none; background: url(<a href="http://www.google.com/cse/intl/en/images/google_custom_search_watermark.gif" rel="nofollow">http://www.google.com/cse/intl/en/images/google_custom_search_watermark.gif</a>) 0% 50% no-repeat rgb(255, 255, 255);"></td>

So I thought all I have to do is add a style by using the ID that is shown (in the TD) as follows

#gs_tti50 > input
background-color: yellow

this does not work. maybe the reason is the watermark background image. Is there anything else I can do to make the searchbar stand out?

gary.turner's picture
Last seen: 38 weeks 4 days ago
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Not tested

Since the generated element's stye rules are inlined, they normally override embedded or external style sources.

Try using the !important rule. I.e.

#gs_tti50 > input {
  background-color: yellow ! important;

If the image is opaque, you may need to set the background image to 'none ! important'.



If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.