Solved

help with Google search form input field formatting

Posted on 2014-03-21
6
1,450 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
  • 4
  • 2
6 Comments
 
LVL 15

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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 15

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

919 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now