David's Blog

[CSS教學] 如何用CSS做出有icon小圖的文字搜尋框

| 0 comments

做出來大概就像這樣

搜尋框裡面有個像放大鏡的小icon圖,現在很多網站的搜尋框都會這樣做,用CSS做起來其實也很簡單,運用背景圖片再加上padding的技巧就可以做出來了。

HTML

首先當然就是HTML結構囉

<input id="search-box" type="text" name="search-box" />

很簡單~

CSS

再來就是CSS的部份

我們先準備好那個小icon圖

再來是CSS的語法

#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個數字,依序代表「上」「右」「下」「左」,把它想成從上開始,依順時針這樣就很好記了。

就是這樣,很簡單吧。

當然如果想要它漂亮一點,可以再加上其他效果,這個我們就留待以後再來教學了。

Leave a Reply

Required fields are marked *.