Question

您好，我是stackoverflow的新手，我最近在我的商店中添加了google自定义搜索，供客户用来查看信息并了解有关我所销售产品类型的更多信息。当我在Shopify上将GCS代码添加到新模板时，我遇到了一些问题。通过在“外观”菜单中编辑搜索引擎本身已解决了主要问题，但仍然存在一个小问题。在搜索引擎的搜索栏上，似乎有这些深色的细分隔线，我似乎无法摆脱。我几乎没有编码经验，所以我不确定代码本身到底有什么问题。因此，我正伸出手来希望找到解决方案。

（这是下面的代码）

<div class="grid">

  <div class="grid__item post-large--two-thirds push--post-large--one-sixth">

    <div class="section-header">
      <h1 class="section-header--title">{{ page.title }}</h1>
    </div>

   <div class="rte">
      {{ page.content }}
    
    </div>
  <body>
  
  <script>
  (function() {
    var cx = '011286737035659106182:hqm_unmmoqy';
    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:searchbox-only></gcse:searchbox-only>
    
  </body>
 
  
</div>

Answer 1

您的主题css和插件css中有一些属性，使这些边框看起来像边界。我制作了两个CSS片段，以删除所有边框或保留一个边框。选择您喜欢的哪一个：）

将此添加到您的css文件中，或在balise <style></style>

之间

带有单个边框：

<style>
form.gsc-search-box{
  border : none;
}
form.gsc-search-box .gsc-input-box table{
   margin-bottom : unset;
}
form.gsc-search-box .gsc-input-box table .gsib_b{
   display : none;
}
form.gsc-search-box table.gsc-search-box{
   margin : 0;
}
form.gsc-search-box table.gsc-search-box td{
    border : none;
}

OR

没有任何边界：

.gsc-control-searchbox-only form.gsc-search-box{
    background: none;
    border: none;
    box-shadow: none;
}

form.gsc-search-box .gsc-input-box table{
      margin-bottom : unset;
   }
   form.gsc-search-box .gsc-input-box table .gsib_b{
      display : none;
   }

form.gsc-search-box table.gsc-search-box{
    margin : 0;
}
form.gsc-search-box table.gsc-search-box td{
    border : none;
}

在Shopify商店中添加Google自定义搜索代码的问题

1 个答案: