Solved

help with Google search form input field formatting

Posted on 2014-03-21
6
1,563 Views
Last Modified: 2014-03-24
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
0
Comment
Question by:Eric Bourland
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
6 Comments
 
LVL 16

Assisted Solution

by:Gurpreet Singh Randhawa
Gurpreet Singh Randhawa earned 500 total points
ID: 39947463
modify this class

.gsc-input-box {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #D9D9D9;
    height: 25px;
}

as:

.gsc-input-box {
    background: none repeat scroll 0 0 #FFFFFF;
    height: 25px;
}

input type css change it like this

.gsc-input {
    background: url("http://www.google.com/cse/intl/en/images/google_custom_search_watermark.gif") no-repeat scroll left center rgba(0, 0, 0, 0);
    padding: 0 !important;
    width: 150px;
}
0
 
LVL 3

Author Comment

by:Eric Bourland
ID: 39947471
I will try this later today. Thank you, randhawa!
0
 
LVL 3

Author Comment

by:Eric Bourland
ID: 39949044
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
0
Create CentOS 7 Newton Packstack Running Keystone

A bug was filed against RDO for the installation of Keystone v3. This guide is designed to walk you through the configuration for using Keystone v3 with Packstack. You will accomplish this using various repos and the Answers file.

 
LVL 16

Accepted Solution

by:
Gurpreet Singh Randhawa earned 500 total points
ID: 39949862
remove the table around the box and try this code

<input type="text" lang="en" autocomplete="off" size="10" class="gsc-input" name="search" title="search" style="width: 100%; padding: 0px; border: medium none; margin: 0px;margin-top:0px; height:24px; outline: medium none; background: url(&quot;http://www.google.com/cse/intl/en/images/google_custom_search_watermark.gif";) no-repeat scroll left center rgb(255, 255, 255);" id="gsc-i-id1" x-webkit-speech="" x-webkit-grammar="builtin:search" dir="ltr" spellcheck="false">
0
 
LVL 3

Author Comment

by:Eric Bourland
ID: 39950098
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
0
 
LVL 3

Author Closing Comment

by:Eric Bourland
ID: 39952047
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
0

Featured Post

Get MongoDB database support online, now!

At Percona’s web store you can order your MongoDB database support needs in minutes. No hassles, no fuss, just pick and click. Pay online with a credit card. Handle your MongoDB database support now!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

622 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question