I know you can add a value with css with bit. But can I overwrite one? In which case I would need the ability to use !important. And I need to give it a background image.
Google custom search is using the “Search” value in my input. In their demo though they use a search icon instead. I wish to use this icon instead. My attempt looks like this…
input.gsc-search-button[value=“”] {
background:url(http://www.google.com/uds/css/v2/search_box_icon.png)
}
I prefer to add the icon to the HTML:
<label for="q">Search this Site</label>
<input type="text" name="q" id="q" value="Search">
<input type="image" src="/images/search_box_icon.png" alt="Search">
(You can just place the <label> off screen if you don’t want it visible.)
I dont have access to the html though
O, right. Well, I just downloaded their code for testing, and it shows the white icon on the blue background. :-/
Thats so weird. I swore I saw it on my page before to. I tested multiple times by removing all the css that has to do with the search. I wonder what could be targeting that? Great - its one of those - where I stare at the screen for hows wondering what I’m missing.
Perhaps create a new test page and paste their code into that, to make sure you aren’t going mad. If it has the white icon on a blue bg, you know something in your code is overriding it.
Man what the heck. I just removed all my css and still the search word is there. I don’t have access to the html. All I do is input a small js snippet. On googles example page and as ralph sees the searcxh word is no where in site - only the png image. Where is this coming from? Got any guesses?
You can still use Firebug / Chrome dev tools etc. to see what HTML/CSS is pulled in by that JS code. You should be able to see immediately what styles are applying there.
Nope here is the test page with nothing but the js http://www.visibilityinherit.com/projects/test.png. The stupid word is still there
I see this styles. But it’s the html value that is creating the word “Search”. Hence I need to overwrite it. It simply shows the search icon for you? Weird. Do you see any settings in google possibly. I dont.
I just took Google’s code and pasted it where I wanted the search form to be. Perhaps you should try that, rather than putting it at the bottom of your page and referencing it with other tags where you want the form to be.
Ya I just tried that too. No go
That’s fabulously weird. My code is identical to yours, except the var cx = ’ ’ is different, of course. But if I run them side by side, mine has the icon and yours doesn’t. Perhaps, while generating the code, you chose some option not to have the image? That’s all I can think of.
Anyhow, I just went to the custom search page, typed in a domain name and grabbed the code. Maybe you should start again?
