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

虽然这可能非常简单，但我无法弄清楚如何使用我的网站CSS自定义Google自定义搜索栏API。我曾尝试应用几个预定义的css类与宽度限制div，但它似乎搜索栏它仍然与样式和iframe看。如何使用自己的CSS自定义Google自定义搜索栏API

这是我的代码：我如何应用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>

或者是有可能呢？

来源

2012-12-21 Maxwell

我相信这是不可能的。我尝试了一次，然后这是不可能的，但从那时起事情可能发生了变化。 – GolezTrol

看起来有可能，如果你给我更多的示例代码aka你尝试过的CSS我可以看到它不适合你。这是我为限制搜索栏的宽度而做的。

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

的jsfiddle：Example Code

我假设你的CSS样式没有足够高的特异性，然后与谷歌代码，所以这就是为什么你没有看到你的应用的样式。您的CSS样式需要具有更大的CSS特性，然后Google才能使您的样式起作用。（参考：CSS Specificity: Things you should know）

让我知道，如果这有助于你前进。

来源

2012-12-21 15:28:15

css特定网站帮助。谢谢，虽然我的代码仍然有一些缺陷 – Maxwell

如果这有助于你的问题，请给我信用:)否则发布你的额外问题，所以我可以帮助！ –

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

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

您将用于样式的主要元素都与.gsc-input类相关。 ~~支持Google文档讨论样式这些事情。我会尽力在稍后的链接中找到并编辑这篇文章。~~ 以下是自定义搜索框和结果的样式Google example。

来源

2012-12-21 15:33:50

感谢您的贡献，但我想我会尝试使用CSS特定的东西来限制cse搜索栏的宽度。和 – Maxwell

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

回答

相关问题