删除Google Searchbox顶部的白色矩形

Question

我想添加一个谷歌搜索框到我的网站。这是我找到的代码：

​

<script>
  (function() {
    var cx = 'Search-Engine ID';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<div class="gcse-searchresults-only"></div>
<form action="search.php" method="GET">
  <input class="input" name="q" placeholder="Search...">
</form>

​

它工作得很好，但是我在搜索框的顶部看到了一个白色的矩形。至少在Chrome和FF中是这样。在Edge中，这是可以的。我试了很久才摆脱了那个长方形，补充道

.gsc-control-cse {
border: none;
background: none;

}

添加到我的css中，还试图用!important代码覆盖Google的代码，但到目前为止都没有起作用。我怎样才能摆脱搜索框顶部的这个白色矩形呢？你可以在这里看到我的测试页面：https://www.patriciakaas.nl/test.php，搜索框在右下角。

约翰娜

Answer 1

.gsc-control-cse, .gsc-control-cse-en {
    border:none !important;
    background:none !important;
}