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

　　效果：

巴特西

自定义input file样式

最新文章

热门文章