CSS实例(二)：灵活使用CSS控制Input元素

最新推荐文章于 2024-01-05 00:15:00 发布

wallimn

最新推荐文章于 2024-01-05 00:15:00 发布

阅读量408

点赞数

分类专栏： JAVA、WEB开发文章标签： CSS XHTML Web .net HTML

JAVA、WEB开发专栏收录该内容

442 篇文章 0 订阅

订阅专栏

　　在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
/***********文章发表请与本人联系，作者保留所有权利*************/

wallimn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS实例(二)：灵活使用CSS控制Input元素

　　在WEB开发过程中，信息录入界面中，经常会有一个特殊的输入元素，如：必填字段、日期选择字段、在弹出窗口中选值的字段，使用CSS来设置这些元素的外观，可以省去一些不必要的按钮、提示，使页面更加简洁。　　效果如下：[align=center][img]/upload/attachment/75446/b8dbd192-90fc-3b10-a8f8-eca6ae2f90ae.gif[...
复制链接

扫一扫