码迷,mamicode.com
首页 > 其他好文 > 详细

自定义input file样式

时间:2016-04-06 14:56:21      阅读:306      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!