CODEWITHSUNDEEP
javascripthtmlcssgoogle-api
Shaoz
Shaoz

Reputation: 10653

Styling the google search api box and the search button

I'm trying to use my own CSS on the Google Search, but nothing I do stays. How can I put my own CSS on it? Is it trough the api, css, etc? And whenever I made a change the whole of the page reload, but the 'search box' is reverted to its origin style.

API:

<script>
  (function() {
    var cx = '005780201047221652427:jopxospdjss';
    var gcse = document.createElement('script'); 
    gcse.type = 'text/javascript'; gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
    '//www.google.co.uk/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>

I don't know if I have to do the styling in JS or somewhere else.

Thank you for help

Many Thanks

Upvotes: 2

Views: 2883

Answers (1)

Gaurav
Gaurav

Reputation: 341

You can try with below code...

<div id="quicksearch">
<form id="cse-search-box" action="search.html">
<div style="float:left">
<input type="hidden" value="005780201047221652427:jopxospdjss" name="cx">
<input type="hidden" value="FORID:10" name="cof">
<input type="hidden" value="UTF-8" name="ie">
<input type="text" onblur="if(this.value=='')value='Search Site';" onfocus="if(this.value=='Search Site')value=''" value="Search Site" class="searchBox" size="28" name="q">
</div>
<div style="float:left;">
<input class="image" type="submit" value="" name="sa">
</div>
</form>
</div>

You can try with your own css with following:-

#quicksearch .searchBox{background:#666666; border:#666666 0px solid; height:22px; color:#CCCCCC; font-size:12px; padding-left:6px;}
#quicksearch .image {
    background: url("search.png") no-repeat scroll center top transparent;
    border: 0 none;
    cursor: pointer;
    display: block !important;
    height: 23px;
    width: 23px;
}

For displaying search record, create a new file with name "search.html" and paste the below code there. Search records will display underneath this page.

<div id="cse-search-results"></div>
            <script type="text/javascript">
              var googleSearchIframeName = "cse-search-results";
              var googleSearchFormName = "cse-search-box";
              var googleSearchFrameWidth = 800;
              var googleSearchDomain = "www.google.com";
              var googleSearchPath = "/cse";
            </script>
        <script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

Upvotes: 1

Related Questions