Eric Bourland
asked on
help with Google search form input field formatting
Hi. I am trying to get a Google custom search form to look good. Here is the development page:
http://test2.ebwebwork.com/
The google custom search form does not display properly, because my existing stylesheet seems to be modifying the search form's appearance.
Because I got this search form from Google, using the Google custom search tool generator, I have only some script to work with:
I can't apply CSS custom styling to that Google script.
Any ideas how I can make this search form look better, or remove the effects of my current style sheet on the search form? (I don't want to remove any parts of the existing style sheet; I need them for the rest of my web site.)
Thank you for any advice.
Eric
http://test2.ebwebwork.com/
The google custom search form does not display properly, because my existing stylesheet seems to be modifying the search form's appearance.
Because I got this search form from Google, using the Google custom search tool generator, I have only some script to work with:
<!-- SearchBox -->
<div class="SearchBox">
<script>
(function() {
var cx = '001382591411870128679:i7bnazymn94';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchbox-only></gcse:searchbox-only>
<!-- /SearchBox -->
</div>
I can't apply CSS custom styling to that Google script.
Any ideas how I can make this search form look better, or remove the effects of my current style sheet on the search form? (I don't want to remove any parts of the existing style sheet; I need them for the rest of my web site.)
Thank you for any advice.
Eric
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Dear randhawa,
I added those line to my style sheet --- but it looks much the same:
http://test2.ebwebwork.com/
Am I missing something?
Thank you again for your help. Hope you are well.
Eric
I added those line to my style sheet --- but it looks much the same:
http://test2.ebwebwork.com/
Am I missing something?
Thank you again for your help. Hope you are well.
Eric
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I tried that -- the search interface looks better -- but search does not seem to work. I type a search word and press Enter and nothing happens:
http://test2.ebwebwork.com/
I think I need to use a FORM tag to enclose the INPUT tag above?
Thanks again for your help, randhawa.
Eric
http://test2.ebwebwork.com/
I think I need to use a FORM tag to enclose the INPUT tag above?
Thanks again for your help, randhawa.
Eric
ASKER
randhawa, thanks for these ideas. I went with the old-school google form / input markup:
<form action="http://www.google.com/cse" id="cse-search-box" style="float:right;">
<input type="hidden" name="cx" value="0013825914118701286 79:i7bnazy mn94" />
<input type="text" name="q" alt="Enter Google Search Keywords" style="height:1.8em;width: 13.0em;pad ding:0;mar gin:0;" />
<input type="submit" name="sa" value="Search ACCT Web Site" style="padding:0.2em; margin:0;" />
</form>
And I applied styles inline, as shown, This seems to work OK. Thank you for your help, as always. Hope you are great.
Eric
<form action="http://www.google.com/cse" id="cse-search-box" style="float:right;">
<input type="hidden" name="cx" value="0013825914118701286
<input type="text" name="q" alt="Enter Google Search Keywords" style="height:1.8em;width:
<input type="submit" name="sa" value="Search ACCT Web Site" style="padding:0.2em; margin:0;" />
</form>
And I applied styles inline, as shown, This seems to work OK. Thank you for your help, as always. Hope you are great.
Eric
ASKER