Solved

help with Google search form input field formatting

Posted on 2014-03-21
6
1,536 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
Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

 
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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

752 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