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

最新推荐文章于 2024-09-20 16:06:21 发布

iteye_19603

最新推荐文章于 2024-09-20 16:06:21 发布

阅读量139

点赞数

文章标签： xhtml

在WEB开发过程中，信息录入界面中，经常会有一个特殊的输入元素，如：必填字段、日期选择字段、在弹出窗口中选值的字段，使用CSS来设置这些元素的外观，可以省去一些不必要的按钮、提示，使页面更加简洁。
　　效果如下：

　　实现这样的效果，只须一张图片：

CSS代码很简单：

Html代码

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="zh-CN"dir="ltr">
<head>
<title>隔壁老王- CSS技术网站</title>
</head>
<styletype="text/css">
.input1,.input2,.input3{
padding:0;
height:15px;
line-height:15px;
border:1pxsolid#ABAFFB;
background:url(inputbk.gif)no-repeatright0;
width:300px;
}
.input2{
background-position:right-15px;
}
.input3{
background-position:right-30px;
background-repeat:repeat-x;
}
</style>
<body>
<h2>灵活使用CSS，控制input元素的外观，<br/>可以省去一些不必要的按钮、提示。</h2>
<inputclass="input3"value="灵活使用CSS，必填字段"/></br></br>
<inputclass="input1"value="wallimn"/></br></br>
<inputclass="input2"value="http://wallimn.iteye.com"/>
</body>
</html>

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。