经常看到一些网站的文本框有一些很不错的效果，比如搜索关键词文本框里面有一个象征搜索的小图片，其实，这些效果制作都非常简单，看过本文，相信你也可以实现丰富多彩的文本框效果
----代码为：--------------------------------------------------------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<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(128.gif);}
input.commentInput {background-image: url(qq.gif);}
</style>
</head>
<body>
<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>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------
上面的代码中 input.txtInput 定义了文本框中有小图标的通用样式，其中 padding 的第四个值是定义文字内容从 20 象素处开始，原因是本文的图片是 16 象素大小，文字四周有 2 象素的边距。具体到实际应用，需要根据你的图片大小决定。
然后，我们又定义了 searchInput 和 commentInput 两个文本框样式，分别设置了2个不同的小图标。
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
？：input.searchInput ====是不是指定义input下面的searchinput的样式呢？
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
posted on 2007-10-23 10:13
sanni 阅读(957)
评论(0) 编辑 收藏 引用