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

经常看到一些网站的文本框有一些很不错的效果，比如搜索关键词文本框里面有一个象征搜索的小图片，或者是文本框边框非常柔和。其实，这些效果制作都非常简单，看过本文，相信你也可以实现丰富多彩的文本框效果。

让你的文本框（input）更加丰富多彩！ – 示例

为你的文本框加一个说明用途的小图标

<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 时可以这样写：

<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>

为你的文本框加一个效果柔和的边框

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