Link to home
Start Free TrialLog in
Avatar of Eric Bourland
Eric BourlandFlag for United States of America

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:

<!-- 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>

Open in new window


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
Avatar of Coast Line
Coast Line
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Eric Bourland

ASKER

I will try this later today. Thank you, randhawa!
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
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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
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="001382591411870128679:i7bnazymn94" />
    <input type="text" name="q" alt="Enter Google Search Keywords" style="height:1.8em;width:13.0em;padding:0;margin: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