如何自定义谷歌自定义搜索栏API与自己的css

How to customize the google custom search bar API with own css

本文关键字：自定义 自己的 API css 搜索栏 谷歌      更新时间：2023-09-26

这可能是相当简单的，虽然，但我不知道如何自定义谷歌自定义搜索栏API与我的网站css。我试过应用几个预定义的css类限制div宽度，但似乎搜索栏仍然不符合iframe的风格。

这是我的代码:我如何应用css到它

<html>
    <head>
        <div width="100%" id="cse" style="width: 100%;">Loading</div>
        <script src="http://www.google.com/jsapi" type="text/javascript">
        </script>
        <script type="text/javascript"> 
            google.load('search', '1', {language: 'en', style: google.loader.themes.V2_DEFAULT});
            google.setOnLoadCallback(function() {
                var customSearchOptions = {};
                var customSearchControl = new google.search.CustomSearchControl('009437919812836441502:rka9ujkwvwe', customSearchOptions);
                customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET); 
                customSearchControl.draw('cse');
            }, true);
        </script>
    </head>
</html>

或者这是可能的吗?

这似乎是可能的，如果你给我更多的例子代码aka css你试过，我可以看到它不适合你。下面是我用来限制搜索栏宽度的一些东西。

#cse .gsc-search-box {
   width: 200px;  
}​

JSFiddle:示例代码

我假设你的CSS样式没有足够高的特异性，然后那些谷歌代码，所以这就是为什么你没有看到你的应用样式。你的CSS样式需要有一个更大的CSS专用性，然后谷歌的为了你的样式工作。(参考:CSS特殊性:你应该知道的事情)

如果这对你有帮助，请告诉我

我的第一个建议是不要在<head>中放置任何非主体HTML。也就是说，将您的<div>从头部移动到<body>标记。

第二，你可以给Google的自定义搜索框设置样式。您需要使用一些允许您检查DOM的工具，例如Chrome中的Web Developer Tools或Firefox中的Firebug(尽管Firefox的内置工具现在也很不错)。Google使用这个div链接到您的站点，并通过JavaScript提供更多的DOM元素。在搜索框加载后，您可以使用开发人员工具检查它，并查看它注入的所有其他元素。

您将用于样式的主要元素都与.gsc-input类相关。有一个支持的Google文档讨论了这些东西的样式。我会试着找到并编辑这篇文章的链接。下面是一个Google示例，展示了自定义搜索框和结果的样式。

相关文章：