Javascript 谷歌搜索框

我有谷歌搜索框的代码。我想缩小尺寸。我把它放在一个使用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>

---

由于搜索框直接呈现在页面上，所以您可以应用任何样式，使其看起来像您所希望的。只需探索渲染框的HTML结构并编写必要的CSS调整

例如：

作用{ 变量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.insertBeforegcse，s； }; .搜索框.gsc控制cse{ 宽度：200px； } .search box input.gsc-search-button{ 背景色：5FC34F； }

---

快速且肮脏，只需减少代码大小：

<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>

---

未测试。

使用浏览器进行检查，您可以找到类和id，然后向它们添加新样式并使用！严格你的新规则很重要

像这样使用-

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

---

给我们看看css代码，LukeCan你能用JavaScript改变大小吗？大小是多少？字体，输入宽度？我想把盒子变小，这样我就可以把它放在右上角。我想OP想改变盒子的样式，把它变小：我想把盒子变小，这样我就可以把它放在右上角。哦，对了，在原来的问题中没有看到。而且没有提供CSS，所以假设这是代码缩减。。我的错。。