让你的文本框（input）更加丰富多彩

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 。是的，一个效果柔和的边框实现了。