Google搜索框

Question

我有一个Google搜索框的代码。我想减小尺寸。我使用html和css将它放在一个网站上。

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

Answer 1

由于搜索框直接在您的页面上呈现，您可以根据需要应用您想要的任何样式。只需探索渲染框的HTML结构并编写必要的CSS调整。

例如：

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

.search-box .gsc-control-cse {
    width: 200px;
}
.search-box input.gsc-search-button {
    background-color: #5FC34F;
}

<div class="search-box">
    <gcse:search></gcse:search>
</div>

唯一棘手的是你必须确保新的CSS声明比导入的谷歌搜索框样式更优先。这就是为什么你必须使你的选择器更具体。就像在我的例子中我使用了一个父选择器.search-box。

Answer 2

快速而又脏，只是缩小代码大小：

<script>
    (function () {
        var d = document, t = 'script';
        var g = d.createElement(t);
        g.type = 'text/java'+t; g.async = true;
        g.src = (d.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=004761606621672356167:q2rk-jxubla';
        var s = d.getElementsByTagName(t)[0]; s.parentNode.insertBefore(g, s);
    })();
</script>
<gcse:search></gcse:search>

或者，如果你知道它只会是http：

<script>
    (function () {
        var d = document, t = 'script';
        var g = d.createElement(t);
        g.type = 'text/java' + t; g.async = true; g.src = 'http://www.google.com/cse/cse.js?cx=004761606621672356167:q2rk-jxubla';
        var s = d.getElementsByTagName(t)[0]; s.parentNode.insertBefore(g, s);
    })();
</script>
<gcse:search></gcse:search>

未经测试..

Answer 3

使用您的浏览器进行检查，您可以找到课程和ID，然后添加新的样式并使用!important来严格修改新规则。

像这样使用 -

.cse .gsc-control-wrapper-cse, .gsc-control-wrapper-cse {
    width: 200px !important;
    margin:0 auto !important;
}