首页 > 其他 > 详细

自定义input file样式

时间:2016-04-06 14:55:59      阅读:104      评论:0      收藏:0      [点我收藏+]

 

自定义input file样式;一般都是通过隐藏input,通过定义label来实现。这种做法要注意的是label的for属性要指定input对应的id;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#file {
				display: none;
			}
			label {
				padding: 6px 15px;
				border-radius: 18px;
				background: #2F9DEA;
				color: #FFF;
				border: 1px solid #49A9ED;
				box-shadow: inset 0px 0px 3px #FFF;
			}
			label:focus,
			label:active {
				box-shadow: none;
			}
		</style>
	</head>
	<body>
		<div>
			<label for="file">
				<input type="file" id="file" />上传文件
			</label>			
		</div>
	</body>
</html>

 效果如下:

技术分享

点击后效果:

技术分享

自定义input file样式

原文:http://www.cnblogs.com/guxingzhe/p/5359066.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!