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 定義了文本框中有小圖標(biāo)的通用樣式，其中 padding 的第四個(gè)值是定義文字內(nèi)容從 20 象素處開(kāi)始，原因是本文的圖片是 16 象素大小，文字四周有 2 象素的邊距。具體到實(shí)際應(yīng)用，需要根據(jù)你的圖片大小決定。
然后，我們又定義了 searchInput 和 commentInput 兩個(gè)文本框樣式，分別設(shè)置了2個(gè)不同的小圖標(biāo)。這樣，我們?cè)谠O(shè)置文本框的 class 時(shí)可以這樣寫(xiě)：
HTML: <p> <label for="keyword">搜索：</label> <input type="text" name="keyword" id="keyword" class="txtInput searchInput" /> </p> <p> <label for="comment">評(píng)論：</label> <input type="text" name="comment" id="comment" class="txtInput commentInput" /> </p>
為你的文本框加一個(gè)效果柔和的邊框
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>
上面的代碼設(shè)置了一個(gè)背景圖，并且左上對(duì)齊，當(dāng)然，我們這個(gè)圖片通常要寬一些、高一些，然后設(shè)置一個(gè)和漸變顏色近似的 border 。是的，一個(gè)效果柔和的邊框?qū)崿F(xiàn)了。
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
