Question

我想更改Google自定义搜索栏的高度，有很多选项可以使用Google自定义搜索编辑器设置搜索栏外观的样式，但是没有一个选项允许您更改高度。

目前搜索栏有一个顶部和底部边框，看起来确实看起来没必要，它太大了，真的不需要。

这是我的标题栏中安装的谷歌搜索栏，因为它太高了，你可以看到它在圈数。 Image of google search

以下是Google搜索栏的代码：

<script>
                  (function() {
                    var cx = '007301268677233961693:36-nzkwdslc';
                    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>

如果有人知道你如何改变这个搜索栏的高度，我希望它的高度为64像素。

谢谢您提前获得任何帮助。

Answer 1

我最初在谷歌上搜索此问题时，正在寻找相同问题的解决方案。我强调了相同的，因为你没有从你的html页面显示任何代码，我不确定我们是否有相同的问题（代码您发布的内容可以在cse.google.com上生成。我将在下面发布一个适用于我的代码的解决方案。

在我的情况下，<gcse:search></gcse:search>位于<div id="topcr">，<div id="top">的孩子，后者只有42px高，而谷歌正好是64px高。

由于我找不到（我仍然无法找到）一种在线设置高度的方法，在cse.google.com的布局设置中，我通过使用外部的两个CSS属性解决了div秒。我补充说：

overflow-y: hidden代表#top，
margin-top: -14px代表#topcr（(64px-42px)/2 = 11px，但输入字段未垂直居中）。

请参阅以下小提琴中的CSS第23,23和29行：https://jsfiddle.net/nr20L4p8/2/ ，其中我使用了来自cse.google.com的js。

＆＃13;

(function() {
                    var cx = '007301268677233961693:36-nzkwdslc';
                    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);
                  })();

＆＃13;

body {margin: 0px auto; padding: 0px; min-width: 420px; font-family: sans-serif; background-color: #99cccc}
.clb {clear: both; height: 0px}
#top {position: fixed; width: 100%; height: 42px; left: 0px; top: 0px; right: 0px; background-color: #000; z-index: 10; overflow-y: hidden}
#topcr {float: right; margin: 0px; margin-top: -14px; padding: 0px; width: 400px}
#cont {margin: 42px auto 20px auto; width: 360px; padding: 20px; background: #c0e0e0; border-radius: 0px 0px 10px 10px; font-size: 16px; z-index: 1}

＆＃13;

<body>
<div id="top">
 <div id="topcr">
  <gcse:search></gcse:search>
 </div>
 <div class="clb"> </div>
</div>

<div id="cont">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</body>

＆＃13;

Answer 2

您是否考虑过构建自己的自定义搜索栏，删除脚本并将其替换为包含在div中的自定义表单，您最终会根据自己的喜好进行设置？请注意，要使其正常运行，您需要Google为您的网站提供的个人ID。

<div class="searchbar">
<form method="get" id="searchform" id="searchbox_007301268677233961693:36-nzkwdslc" action="result.html">
<div>
<input value="007301268677233961693:36-nzkwdslc" name="cx" type="hidden"/>
<input value="FORID:11" name="cof" type="hidden"/>
<input type="text" value="Search..." name="s" id="s" onfocus="defaultInput(this)" onblur="clearInput(this)" />
<input type="submit" id="searchsubmit" value=" " />
</div>
</form>
</div>

此外，您还需要设置将由搜索表单调用的result.html页面。查看此页面以获取实现结果页面所需的代码：http://arindambose.com/blog/?p=102

更改Google自定义搜索栏的高度

2 个答案: