javascript - 样式化谷歌搜索 API 框和搜索按钮

Question

我正在尝试在 Google 搜索中使用我自己的 CSS，但我所做的一切都没有保留。我怎样才能把我自己的 CSS 放在上面？是通过 api、css 等方式实现的吗？每当我进行更改时，整个页面都会重新加载，但“搜索框”会恢复到其原始样式。

应用程序接口(interface):

<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 或其他地方做样式。

谢谢你的帮助

非常感谢

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

您可以尝试使用您自己的 css:-

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