谷歌自定義搜索（CSEv2）幫助樣式？

Question

我需要造型的Google Custom Search箱（而不是結果）

舊風格採用了form標籤，在那裏你可以很容易地風格的外觀&搜索框的手感幫助。

<form action="/search" id="searchbox_abc:123" class="search"> 
    <input type="hidden" name="cx" value="abc:12"> 
    <input type="hidden" name="cof" value="FORID:XX"> 
    <input type="text" name="q" size="16" class="smalltext">      
    <input type="submit" name="sa" value="SEARCH" class="smalltext"> 
</form> 

有了新的CSEv2代碼，它包含在腳本標記：

<script> 
    (function() { 
    var cx = 'abc:123'; 
    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> 

，你必須把要顯示在搜索框下面的標籤。

<gcse:search></gcse:search> 

我需要幫助，瞭解如何將新CSE設置爲與上一個樣式相似。 （字體大小，按鈕和輸入字段大小..等等，與以前完全一樣的風格。應用類/設置字體..等等）

謝謝！

Answer 1

在CSE page，

1. 選擇搜索引擎，您要的風格。
2. 的Customize標籤

這對主題化，你要的風格CSE的任何組件選項上單擊Look and feel

點擊。

更新

如果你想比在控制面板中所提供的更多的選項，你將不得不使用the API，使用它是在頁面的底部的一個例子。

您會特別感興趣的是Custom Search Element Control API，您可以在其中指定哪個HTML標記，然後您可以使用該元素的標識。

Sample Demo：

<div id="test"></div> 
<style type="text/css"> 
    #test input { 
     font-size: 32px; 
     color: red; 
    } 
</style> 

<script> 
var myCallback = function() { 
    if (document.readyState == 'complete') { 
    google.search.cse.element.render({ 
      div: "test", 
      tag: 'search' 
    }); 
    } else { 
    google.setOnLoadCallback(function() { 
     google.search.cse.element.render({ 
       div: "test", 
       tag: 'search' 
      }); 
    }, true); 
    } 
}; 

window.__gcse = {parsetags: 'explicit', callback: myCallback}; 
(function() { 
    var cx = '008717607452966325908:cegvvfhkhvk'; // Insert your own Custom Search engine ID here 
    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> 

Answer 2

1. 使用DOM檢查工具像一個內置的谷歌Chrome或Firefox瀏覽器。 （右鍵單擊一個元素並選擇「檢查」。）這將允許您確定元素ID /類及其當前樣式。

2. 寫CSS規則重寫這些樣式，像這樣：

   input.gsc-input {} 
   input.gsc-search-button {} 
   form.gsc-search-box {} 
   div.gsc-control-cse {} 
   

Answer 3

你並不需要做的一切，只是將其添加到谷歌的搜索<script>結束標籤Like So：

<script> 
    (function() { 
     var cx = '017524632059031635296:oiqsdcln6tk'; 
     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> 
<gcse:searchresults-only></gcse:searchresults-only> 

確保你在機器人上添加了<gcse:searchresults-only ></gcse:searchresults-only>這結束腳本標籤的湯姆和添加自己的形式存在，例如：

<form action="" method="GET"> 
    <input class="input" name="q" placeholder="Search..."> 
</form> 

然後風采吧，你會是多麼樣式的常規HTML標記，你是好去！它的工作方式與過去一樣。 PS。如果你不想把用戶的其他地方作爲例子search.html只需添加這個<form action="search.html" method="GET"> insted這個<form action="" method="GET">

希望它幫助你！ -Arqetech

Answer 4

我得到這個工作的方式.. 1.在google腳本中設置async爲false（gcse.async = false）; 2.添加下面的CSS。這可能取決於CSS加載的順序！

.gsc-control-cse {padding：0！important; }

Answer 5

TO CLEAR WATERMARK：

.gsc-clear-button{ 
display:none !important; 
} 
.cse input.gsc-input,input.gsc-input{ 
background-image:none !important; 
height:30px !important; 
} 

Answer 6

您需要將搜索框和結果的文件分開。

對於主文件：

<form action="/search.html" method="get"><!--Change /search.html to your 
results file--> 
    <input type="text" name="search" placeholder="Search.."> 
    <input type="submit" name="q" value="Submit"> 
</form> 
<style> 
    input[type=text] { 
     width: 150px; 
     box-sizing: border-box; 
     border: 2px solid #ccc; 
     border-radius: 4px; 
     font-size: 16px; 
     background-color: white; 
     background-position: 10px 10px; 
     background-repeat: no-repeat; 
     padding: 10px; 
     -webkit-transition: width 0.4s ease-in-out; 
     transition: width 0.4s ease-in-out; 
    } 

    input[type=text]:focus { 
     width: 300px; 
    } 

    input[type=submit] { 
     width: 100px; 
     box-sizing: border-box; 
     border: 2px solid #ccc; 
     border-radius: 4px; 
     font-size: 16px; 
     background-color: white; 
     background-position: 10px 10px; 
     background-repeat: no-repeat; 
     padding: 10px; 
     -webkit-transition: width 0.4s ease-in-out; 
     transition: width 0.4s ease-in-out; 
    } 
</style> 

而對於結果文件（默認：search.html）：

<script> 
    (function() { 
     var cx = 'abc:123'; 
     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> 
<gcse:searchresults-only></gcse:searchresults-only> 

如果它不工作，這可能是因爲你的網站是不是在Google搜索引擎上，或者可能是代碼錯誤？如果不起作用，請回復。