Forum Moderators: not2easy
I've done a lot of online searching for information and only find the question asked but unanswered on the Google Help Blog.
All I want to do is to set the size and color of the search box and button. Can anyone help me with this or tell me where to look for information?
I'd suggest to check the generated code. The tool I typically use for that is a firefox add-on: It's called "web developer".
It has a function to see the generated code (the code *after* the javascript ran)
And work from there.
I'm not sure which google search you're refering to though as the one I'm using (comes part of adsense) is just a plain form with a table in it.
What (examplified) code are you using in your document?
But the provided search box is so ugly I'm not using it. Instead I've just linked the word "search" to the search page. I know I'd get a lot more people using search if I could put the search box in the top nav bar but the button has to be smaller and color coordinated.
I can make the button shorter by using the word "go" instead of "search" but see no way to change the size of the button or the font.
I can make the box shorter but not narrower.
<!-- Google CSE Search Box Begins -->
<form action="http://" id="searchbox_numbersandletters">
<input type="hidden" name="cx" value="numbersandletters" />
<input type="hidden" name="cof" value="FORID:11" />
<input type="text" name="q" size="25" />
<input type="submit" name="sa" value="Search" />
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=searchbox_numbers%3Ats0ntmrlbj8&lang="></script>
<!-- Google CSE Search Box Ends -->
I'm also not sure what you're allowed to change to the google code, check that for yourself.
<!-- Google CSE Search Box Begins -->
<form action="http://" id="searchbox_numbersandletters">
<input type="hidden" name="cx" value="numbersandletters" />
<input type="hidden" name="cof" value="#" />
<input type="text" name="q" size="25" />
<input type="submit" name="sa" value="Search" />
</form>
<script type="text/javascript" src="#"></script>
<!-- Google CSE Search Box Ends -->
e.g.:
#searchbox_numbersandletters input {margin:0; padding:0; font-size:50%; color:red; background-color:yellow;}
To select just the submit button:
#searchbox_numbersandletters input:last-child {color:green;}
The standard allows to select based on type="submit", but I'd not bet on IE giving you any consideration if you use that.
Test it well in all browsers, some are stubborn. E.g. safari has it's own way for showing buttons etc.
The "name" value pairing is in a somewhat transitory phase the name is required for JS function - but if the (any) form were being correctly built, from an accessible POV, it should have <label>'s associated with each of the <input>s.
In order to associate a label with an input the input needs an ID. Thus it is very common now to see properly constructed forms which have both "name" and "ID" attributes, usually with the same value. You could argue that by not allowing the change to the code to add a label and ID Google would be making your nice accessible site ;) non user friendly, although properly technical that argument would only likely stand up well for the text input as a "submit" button is an exception which makes it's association via its value attribute by default.
Once the ID is there you can style the inputs separately. It is possible to style them as it stands using the attribute selector and the name attribute: e.g.
input[name="sa"] {background: #ff0;}-do let us know what they say
