html - html正文背景问题

Question

有一个白色的 strip ，我把(google custom sesrch)搜索结果渲染标签 gcse:searchresults-only

如果我从 var cx 中删除 cse id 或删除上面的标签，它工作正常并且白色条纹消失

屏幕截图 /image/W3x2B.png

我应该如何删除它？请帮忙

这是部分代码。

body {
  background: grey;
}

<form action="#">
  <input type="search" name="q" />
  <input type="Submit">
</form>

<script>
  (function() {
    var cx = '017892367244882832713:c64hvc3mwtu';
    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>
<gcse:searchresults-only></gcse:searchresults-only>

Answer 1

脚本正在创建一个类为白色的 gsc-control-cse 的 div。只需覆盖样式:

body {
  background: grey;
}

.gsc-control-cse {
  /* ok to use important here as overriding third party styles */
  background: grey !important;
  border-color: grey !important;
}

<form action="#">
  <input type="search" name="q" />
  <input type="Submit">
</form>

<script>
  (function() {
    var cx = '017892367244882832713:c64hvc3mwtu';
    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>
<gcse:searchresults-only></gcse:searchresults-only>

给你的一个小提示 - 你可以右键单击事物并选择检查元素，它将打开一些开发人员工具，这些工具将向你显示哪些类和样式应用于你正在检查的元素