帶有自定義搜索框和按鈕的Google自定義搜索？

Question

我正在嘗試進行Google自定義搜索（我只需要在我的網站上使用某種搜索引擎），並且需要使其可以使用我自己的搜索框（輸入字段）。我需要它具有確切的大小。我也需要能夠讓我自己的按鈕來搜索。我將需要能夠改變搜索按鈕的大小和背景。我還不完全確定，但我可能真的需要它是一個常規的IMG。

有誰知道如何做到這一點？

如果你不能用Google做到這一點，你知道另一種方式嗎？

如果除了使用自己的搜索引擎之外沒有其他的方法，我可以請鏈接到一個非常簡單的教程，如何使自己的。我願意投入額外的工作去學習，但我嘗試了一下，在看了三個不同的內容之後，我放棄了，因爲它們非常漫長而令人困惑。我希望我只是看錯了地方。

Answer 1

這裏是我使用的，你只需要一些樣式添加到<input id='q'這是搜索框的一個，並且< input value='MyButton'是點擊

<!-- Google CSE Search Box Begins --> 
<center> 
<form id="searchbox_XXXXXXXXXX:YYYYYYYYY" action="http://myblog"> 
    <input value="XXXXXXXXXX:YYYYYYYYY" name="cx" type="hidden"/> 
    <input value="FORID:11" name="cof" type="hidden"/> 
    <input id="q" style="width:600px;" name="q" size="75" type="text"/> 
    <input value="MyButton" name="sa" type="submit"/> 
</form> 
</center> 
.... 

編輯按鈕：以上就是我的答案從2010年起，我無法確認它是否在工作或者不再工作，但這是一個正在工作的人。

<div 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'}); 
    google.setOnLoadCallback(function() { 
    var customSearchControl = new google.search.CustomSearchControl('XXXXXXXXXXXXXXXX:YYYYYYYYYYYYYY'); 
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET); 
    var options = new google.search.DrawOptions(); 
    options.setAutoComplete(true); 
    customSearchControl.draw('cse', options); 
    }, true); 
</script> 

欲瞭解更多信息：指https://developers.google.com/custom-search/docs/js/cselement-devguide

Answer 2

對於誰是尋找「外觀和感覺」下新的「疊加結果」選項的解決方案的Google。我使用了你的答案，並添加了一些小小的黑客來使其工作。基本的想法是獲取谷歌給你的代碼，隱藏谷歌的搜索框和按鈕，並用正確的XXXXX：YYYY代碼使用你的答案。隱藏<gcse:search></gcse:search>"請勿使用display:none，否則搜索結果將不起作用。

<script> 
    (function() { 
    var cx = 'XXXXXXXXXX:YYYYYYYYY'; 
    var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; 
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); 
})(); 
</script> 
<div style="width:0px;overflow:hidden;height:0px;"> <!-- if you use display:none here, it doesn't work--> 
    <gcse:search></gcse:search> 
</div> 
<form id="searchbox_XXXXXXXXXX:YYYYYYYYY" action=""> 
    <input value="XXXXXXXXXX:YYYYYYYYY" name="cx" type="hidden"/> 
    <input value="FORID:11" name="cof" type="hidden"/> 
    <input id="q" style="" name="q" size="75" type="text"/> 
    <button class="btn">Search</button> 
</form> 

Answer 3

GE計算器，

問題真的讓我解僱，足夠的做一個小步行通過 - 如果你想建立一個V2酒吧，對付扁平望遠鏡，只是想讓望遠鏡工作，想用v2完全替換自定義欄，查找和定位使用的樣式並覆蓋它們。希望能幫助到你！ http://t.co/9nvx2l0DeD @ eb_p1

長地址：http://eburnett.hubpages.com/hub/googlecustomsearchenginev2