http://www.corange.cn/archives/2008/10/2077.html

CSS: <style type="text/css"> input.txtInput { background: #fff; background-repeat: no-repeat; background-position: 2px center; border:1px solid #999; padding:2px 2px 2px 20px; } input.searchInput {background-image: url(search.gif);} input.commentInput {background-image: url(comments.gif);} </style>

上面的代碼中 input.txtInput 定義了文本框中有小圖標的通用樣式，其中 padding 的第四個值是定義文字內容從 20 象素處開始，原因是本文的圖片是 16 象素大小，文字四周有 2 象素的邊距。具體到實際應用，需要根據你的圖片大小決定。

然后，我們又定義了 searchInput 和 commentInput 兩個文本框樣式，分別設置了2個不同的小圖標。這樣，我們在設置文本框的 class 時可以這樣寫：

HTML: <p> <label for="keyword">搜索：</label> <input type="text" name="keyword" id="keyword" class="txtInput searchInput" /> </p> <p> <label for="comment">評論：</label> <input type="text" name="comment" id="comment" class="txtInput commentInput" /> </p>



為你的文本框加一個效果柔和的邊框

CSS: <style type="text/css"> input.borderInput { background-image: url(border.gif);; background-repeat: no-repeat; background-position: left top; border:1px solid #d5dee9; padding:3px; } </style>

上面的代碼設置了一個背景圖，并且左上對齊，當然，我們這個圖片通常要寬一些、高一些，然后設置一個和漸變顏色近似的 border 。是的，一個效果柔和的邊框實現了。

讓你的文本框（input）更加豐富多彩