自定义input file样式

 实现方法一：

自定义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>

 效果如下：

点击后效果：

实现方法二：

<style type="text/css">
/*a  upload */
.a-upload {
	padding: 4px 10px;
	height: 20px;
	line-height: 20px;
	position: relative;
	cursor: pointer;
	color: #888;
	background: #fafafa;
	border: 1px solid #ddd;
	border-radius: 4px;
	overflow: hidden;
	display: inline-block;
	*display: inline;
	*zoom: 1
}

.a-upload  input {
	position: absolute;
	font-size: 100px;
	right: 0;
	top: 0;
	opacity: 0;
	filter: alpha(opacity = 0);
	cursor: pointer
}

.a-upload:hover {
	color: #444;
	background: #eee;
	border-color: #ccc;
	text-decoration: none
}

.file {
	position: relative;
	display: inline-block;
	background: #D0EEFF;
	border: 1px solid #99D3F5;
	border-radius: 4px;
	padding: 4px 12px;
	overflow: hidden;
	color: #1E88C7;
	text-decoration: none;
	text-indent: 0;
	line-height: 20px;
}

.file input {
	position: absolute;
	font-size: 100px;
	right: 0;
	top: 0;
	opacity: 0;
}

.file:hover {
	background: #AADFFD;
	border-color: #78C3F3;
	color: #004974;
	text-decoration: none;
}
</style>

　　

<div>
	<a href="javascript:void(0);" class="a-upload"> <input type="file"
		name="" id="">点击这里上传文件
	</a>

	<a href="javascript:void(0);" class="file">选择文件 <input type="file"
		name="" id="">
	</a>
</div>

　　效果：

 

posted @ 2016-04-06 13:53  居无常  阅读(583)  评论(0)    收藏  举报