带有谷歌自定义搜索的自定义搜索框答案

【问题标题】：Custom search box with google custom search带有谷歌自定义搜索的自定义搜索框
【发布时间】：2018-12-13 06:12:21
【问题描述】：

我正在向我的网站添加搜索框。我目前的解决方案只是对我输入的内容进行谷歌搜索，但这是我发现的唯一方法，让我让它看起来符合我的审美。

这是我目前拥有的

<div id="custom-search-input">
    <form method="get" action="https://www.google.com/search">
        <input type="text" class="form-control input-lg" placeholder=" Search" name="q">
        <button class="btn btn-info btn-lg" type="search" style="position:absolute; top:30px; right: 5px;">
            <i class="fas fa-search fa-lg" aria-hidden="true"></i>
        </button>
    </form>
</div>

我希望它看起来像我想要的那样，但它只在我的网站上进行自定义谷歌搜索。

我该怎么做呢？

【问题讨论】：

哦，我明白了。如何将自己的样式添加到他们的自定义搜索栏？
不，Google 不允许这样使用他们的搜索引擎。您不能伪装他们的服务并假装它是您自己的搜索引擎。但是您可以在新标签中显示搜索结果（请参阅this method），或者您可以使用iframe 元素在您的网页上显示谷歌网站（您将无法修改它）
好的，我明白了，谢谢！

标签： html google-search google-search-api

【解决方案1】：

您可以使用 CSS 重写默认的谷歌自定义搜索框主题。只需将 google 自定义搜索 javascript 放入您的页面，然后使用 css。

https://getsitethemes.com/snippets/custom-google-custom-search-box-new-theme-2535

【讨论】：