html - HTML正文背景问题

我将（google自定义sesrch）搜索结果呈现标记gcse：searchresults-only放在白色的条带中

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

屏幕截图https://i.stack.imgur.com/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>

最佳答案

该脚本正在创建一个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>

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

关于html - HTML正文背景问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52280035/