在WEB开发过程中,信息录入界面中,经常会有一个特殊的输入元素,如:必填字段、日期选择字段、在弹出窗口中选值的字段,使用CSS来设置这些元素的外观,可以省去一些不必要的按钮、提示,使页面更加简洁。
效果如下:
[align=center]
[img]/upload/attachment/75446/b8dbd192-90fc-3b10-a8f8-eca6ae2f90ae.gif[/img]
[/align]
实现这样的效果,只须一张图片:
[align=center]
[img]/upload/attachment/75444/3a0a63ab-3286-324d-9b95-88384ded73fe.gif[/img][/align]
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
/***********文章发表请与本人联系,作者保留所有权利*************/