views:

248

answers:

2

Although this seems like a simple task, I need to change the background color of an GOogle Custom Search input field. You can view the page here

Currently, the input field is white, and I need to change it to #4e4e4e. The problem is that I cannot seem to find the correct CSS selector to set the background color. It looks like the google script overrides the css. I need a hack to re-color the background image. Maybe a quick jquery line will fix it, but its not working for me: I tried using the addClass function but it didnt work.

Any Ideas?!

+1  A: 

input.gsc-input {background-color: #4E4E4E} should do the trick I believe.

thor
tried that and no luck. hmmm
JCHASE11
+1  A: 

if this doesn't work

input.gsc-input { background-color: #4E4E4E !important; }

then this should work.

$(function() {
    $('.gsc-input').css('background-color', '#4E4E4E');
}

I didn't check, but if google has js modifying the styles, then you just need to make sure the jquery script runs last.

Rob Van Dam
what exactly does the !important do? It overides all other styles for the same selector?
JCHASE11
@JCHASE11 The `!important` overrides the normal cascading priority rules for stylesheets. For instance, the input element itself had styling on it which would normally have a higher priority over any simple style rule, but the !important overrides that priority. Note however, that if the style on the element had !important that would win instead. Better explanation here: http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css
Rob Van Dam
understood, thanks!
JCHASE11