Question

虽然这可能很简单，但我无法弄清楚如何使用我的网站css自定义Google自定义搜索栏API。我已经尝试应用几个具有约束div宽度的预定义css类，但它似乎仍然没有样式的搜索栏和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>

或者它有可能吗？

Answer 1

似乎有可能，如果你给我更多的例子代码，你试过的css，我可以看到它不适合你。我这样做是为了限制搜索栏的宽度。

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

JSFiddle：Example Code

我假设您的CSS样式的特异性不如Google代码那么高，这就是为什么您没有看到应用的样式。您的CSS样式需要具有比Google更大的CSS特性才能使您的样式生效。（参考：CSS Specificity: Things you should know）

如果这有助于您前进，请告诉我。

Answer 2

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

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

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

如何使用自己的CSS自定义Google自定义搜索栏API

2 个答案: