做出來大概就像這樣
搜尋框裡面有個像放大鏡的小icon圖，現在很多網站的搜尋框都會這樣做，用CSS做起來其實也很簡單，運用背景圖片再加上padding的技巧就可以做出來了。
HTML
首先當然就是HTML結構囉
|
1 |
<input id="search-box" name="search-box" type="text" /> |
很簡單～
CSS
再來就是CSS的部份
我們先準備好那個小icon圖
再來是CSS的語法
|
1 2 3 4 5 6 |
#search-box { font-size: 13px; width: 120px; background: #E6E6E6 url('../images/search.gif') no-repeat 3px 3px; padding: 3px 3px 3px 22px; } |
主要就是在那個background，將圖片當成背景放進去，設定不重複鋪排，距離左上原點X軸Y軸各3個pixel。圖片的URL是以CSS檔所在位置相對於圖檔的路徑，所以如果你的HTML、CSS和圖檔都放在同一個目錄下，那麼寫成url(‘search.gif’)就可以，當然，要放完整URL也是可以啦。
再來設定內縮padding，左邊內縮22個pixel，讓出空間讓icon顯示出來。那個padding的4個數字，依序代表「上」「右」「下」「左」，把它想成從上開始，依順時針這樣就很好記了。
就是這樣，很簡單吧。
當然如果想要它漂亮一點，可以再加上其他效果，這個我們就留待以後再來教學了。