更改谷歌自定义搜索栏的高度答案

【问题标题】：Change the height of google custom search bar更改谷歌自定义搜索栏的高度
【发布时间】：2015-07-12 23:20:06
【问题描述】：

我想更改 google 自定义搜索栏的高度，有很多选项可以通过使用 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 像素。

感谢您提前提供的任何帮助。

【问题讨论】：

你能分享你的网站链接吗？
不！.. 不是这个代码。您嵌入页面的代码区域。
嗨！请记住将以下答案之一标记为已接受，如果有解决问题的话！ :)

标签： html css search

【解决方案1】：

您是否考虑过构建您自己的自定义搜索栏、删除脚本并将其替换为包含在 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

【讨论】：

【解决方案2】：

我最初在谷歌搜索时阅读了这个问题，以寻找 same 问题的解决方案。我强调 same 是因为，由于您没有显示 html 页面中的任何代码，我不确定我们是否遇到了 same 问题（您发布的代码可能是在cse.google.com 上生成）。我将在下面发布适用于我的代码的解决方案。

在我的例子中，<gcse:search></gcse:search> 在 <div id="topcr"> 内部，<div id="top"> 的子对象，后者只有 42px 高，而 Google 的东西正好是 64px 高。

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

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

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

(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);
                  })();

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}

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

【讨论】：