设置谷歌搜索API框和搜索按钮的样式

时间:2012-10-17 11:58:22

标签: javascript html css google-api

我正在尝试在Google搜索上使用自己的CSS,但我没有留下任何东西。我怎样才能把自己的CSS放在上面呢?它是通过api,css等吗? 每当我进行更改时,整个页面都会重新加载,但“搜索框”会恢复为原始样式。

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>

我不知道我是否必须在JS或其他地方进行样式化。

感谢您的帮助

非常感谢

1 个答案:

答案 0 :(得分:1)

您可以尝试使用以下代码...

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

您可以尝试使用以下内容: -

#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;
}

要显示搜索记录,请创建一个名为“search.html”的新文件,然后在下面粘贴以下代码。搜索记录将显示在此页面下方。

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