Customising Google Custom Search's iFrame to have a transparent background?

I've looked through all the relative GCS questions and answers on this site and have looked around the net, but no avail.

I am using Google Custom Search with the iFrame option and the standard theme on a site where the background of the site has a textured, multicolour background. The Google results come in a standard #FFFFFF background inside the iFrame. I want to set this to either none or transparent, so the search results iFrame compliments the site's current design. I've looked in the Global Styles and various customising styles options in the Google admin for this product, but it only o开发者_如何学Cffers the options to pick HEX colours for the background and no way to have none or transparent. Even if I leave it blank, it'll default to blank.

I can't really use Javascript or CSS to adjust what's inside the Google generation iFrame - or can I? Is there any way around this problem?

Thank you in advance.

Nope. There's no way around this problem - I've looked into it myself. The only real option is to use the Google Search API and fetch the results using ajax. Not a good idea if you're hoping to make money out of the sponsored links though.

You cannot do anything with the content inside an iframe that comes from another domain because it violates the same-origin policy.

There is no way around this. You cant style stuff that is not on your domain. Maybe you can hit the custom search using a get url like:

http://google.com?q=the_search_term&customid=34523432

in that case, you can make your own search box and style it yourself.

You could use your own styles.

Just add to your styles

iframe{ background:transparent !important }

To overrule the other styles in real browsers.
In IE you must also add allowtransparency="true" to the iFrame, which can be done using JS. See here: How can I set a custom width on my Google search iframe?

All you have to do is add "&bc=transparent" to the end of the "...embedded=true" link. It will make the entire background transparent.

The solution is to override css like this:

.cse input.gsc-input, input.gsc-input {background-image:none !important;}

Found the answer here.