如何使用自己的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

回答

相關問題