[Blogger Hacks] 換掉 Google 自訂搜尋的醜醜按鈕

原本按照 Google 自訂搜尋的語法，［搜尋］的按鈕實在很醜，如下圖：

不管怎麼調整，常常都會是破壞畫面的兇手。

現在想將該醜醜的按鈕，換成圖片方式來顯示，方法很簡單，如下：

將原本的搜尋指令，如下：

<input value="搜尋" name="sa" type="submit"/>

置換成：

<input type="image" src="你的圖片位址" onClick="document.formname.submit()">

即可。

另外，我是採用CSS定義整個搜尋區塊的顯示，再用 DIV 配合使用。這樣比較方便處理文字與圖形的對齊問題，CSS定義如下：

<style type="text/CSS">
#searchbar{
display:block;
float:left;
position: relative;
top: 4px;
left: 120px;
width:300px;
margin:0 1px;
color:#ffffff;
border: 0px;
vertical-align:middle; /*to firefox 讓圖片文字垂直居中*/
}
</style>

而原本的 Google 自訂搜尋 Code，前後用 DIV 包起來，如下：

<div id="searchbar">
...[Google 自訂搜尋引擎]程式碼...
</div>