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.
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
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}
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 :).
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).
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;
}