0

虽然这可能很简单，但我不知道如何使用我的站点 css 自定义 Google 自定义搜索栏 API。我已经尝试应用几个宽度受限的预定义 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>

或者有可能吗？

4

2 回答 2

1

似乎有可能，如果您给我更多示例代码，也就是您尝试过的 css，我可以看到它不适合您的地方。这是我为限制搜索栏的宽度所做的事情。

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

JSFiddle：示例代码

我假设您的 CSS 样式没有比 Google 代码足够高的特异性，所以这就是您看不到应用样式的原因。您的 CSS 样式需要具有比 Google 更大的 CSS 特异性才能使您的样式正常工作。（参考：CSS 特性：你应该知道的事情）

让我知道这是否有助于您继续前进。

于 2012-12-21T15:28:15.203 回答
0

我的第一个建议是不要在<head>. 也就是说，将<div>你拥有的从头部移动到<body>标签。

其次，您绝对可以为 Google 的自定义搜索框设置样式。您需要使用可以检查 DOM 的工具，例如 Chrome 中的 Web Developer Tools 或 Firefox 中的 Firebug（尽管 Firefox 的内置工具现在也很不错）。Google 使用该 div 连接到您的网站并通过 JavaScript 提供更多 DOM 元素。搜索框加载后，您可以使用开发人员工具对其进行检查，并查看它注入的所有其他元素。

您将用来设置样式的主要元素都与.gsc-input类相关。有一个 Google 文档支持讨论这些东西的样式。稍后我将尝试使用链接查找和编辑此帖子。 这是自定义搜索框和结果样式的Google 示例。

于 2012-12-21T15:33:50.833 回答