如何设置样式 google cse

Question

我从 google 那里得到了这段代码，但我无法设置它的样式，我在我网站的 css 中添加了新规则，但它不听它并用google 的默认值，我可以用它做什么来让它看起来像我想要的那样，而不是 google 计划的样子？

那是我的 css 被忽略了

.cse .gsc-control-cse, .gsc-control-cse {
  background-color: transparent;
  border: none;
  width: 280px;
}

这就是 google cse 代码

<script>
  (function() {
    var cx = '013795634587489910289:wcfxuut_dc8';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

Answer 1

尝试添加样式表，您的

.cse .gsc-control-cse, .gsc-control-cse {
  background-color: transparent;
  border: none;
  width: 280px;
}

样式是 google 的 css.

例如您的 html 可能看起来像这样：

<link rel="stylesheet" href="https://cloud.google.com/compute/style.css" type="text/css">
<link rel="stylesheet" href="style/page.css" type="text/css">

其中 https://cloud.google.com/compute/ 保存 google gcs 的样式，style/page.css 保存 .cse .gsc-control-cse, .gsc-control-cse { ... } 样式。

作为最后的尝试，仅在必须时使用：

（感谢@MrUpsidown 指出这个方法是inherently bad）
~~在每个 CSS 规则后添加 !important：~~

~~.cse .gsc-control-cse, .gsc-control-cse { background-color: transparent !important; border: none !important; width: 280px !important; }~~

~~!important css 声明用于覆盖应用于同一元素的另一种样式。更多信息在这里：http://www.webcredible.com/blog-reports/web-dev/css-important.shtml~~

Answer 2

我注意到，这个问题已经有 6 年零 9 个月了，并且有一个新版本的 gsce。我的解决方法很简单：

CSS:

    .gsce-search-outter {
      max-width: 35ch; /* about 35 characters long, give or take a few from google's own styling */
    }

HTML:

    <script async src="{URL}"></script>
    <div class="gsce-search-outter"><div class="gcse-search"></div></div>

演示片段：

.gsce-search-outter {
  max-width: 35ch;
}

<!--Note: the src is a demo by google-->
<script async src="https://cse.google.com/cse.js?cx=977e2d39cba1e462e">
</script>
<div class="gsce-search-outter">
<div class="gcse-search"></div>
</div>

如何设置样式 google cse

How to style google cse

html

css

google-custom-search

作为最后的尝试，仅在必须时使用：