浏览 3334 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-02-14
最后修改：2010-10-11
在WEB开发过程中，信息录入界面中，经常会有一个特殊的输入元素，如：必填字段、日期选择字段、在弹出窗口中选值的字段，使用CSS来设置这些元素的外观，可以省去一些不必要的按钮、提示，使页面更加简洁。
效果如下： 
实现这样的效果，只须一张图片：  CSS代码很简单：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr">
<head>
<title>隔壁老王 - JavaEye技术网站</title>
</head>
<style type="text/css">
.input1,.input2,.input3{
padding:0;
height:15px;
line-height:15px;
border:1px solid #ABAFFB;
background:url(inputbk.gif) no-repeat right 0;
width:300px;
}
.input2{
background-position:right -15px;
}
.input3{
background-position:right -30px;
background-repeat:repeat-x;
}
</style>
<body>
<h2>灵活使用CSS，控制input元素的外观，<br/>可以省去一些不必要的按钮、提示。</h2>
<input class="input3" value="灵活使用CSS，必填字段"/></br></br>
<input class="input1" value="wallimn"/></br></br>
<input class="input2" value="http://wallimn.iteye.com"/>
</body>
</html>
/***********本人原创，欢迎转载，转载请保留本人信息*************/ 作者：wallimn 电邮：wallimn@sohu.com 时间：2009-02-14 博客：http://blog.csdn.net/wallimn http://wallimn.iteye.com 网络硬盘：http://wallimn.ys168.com /***********文章发表请与本人联系，作者保留所有权利*************/ 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
