真正兼容IE、Firefox、Chrome的文件选择input file按代码,Css代码库,德仔网

代码语言

代码分类

【Css】真正兼容IE、Firefox、Chrome的文件选择input file按

作者: / 发布于2016/5/18/ 890

现实中很多时候传统的文件选择按钮已经满足于美丽的页面，严重影响网页美观，网络上的这种代码很多，但是真正兼容的确实很少，今天我们提供一份真正兼容IE、Firefox、Chrome的文件选择file按钮美化代码，无需JS模拟，纯CSS实现

.new-contentarea {
	width: 100%;
	overflow:hidden;
	margin: 0 auto;
	position:relative;
}
.new-contentarea label {
	width:100%;
	height:100%;
	display:block;
}
.new-contentarea input[type=file] {
	width:188px;
	height:60px;
	background:#333;
	margin: 0 auto;
	position:absolute;
	right:50%;
	margin-right:-94px;
	top:0;
	right/*\**/:0px\9;
	margin-right/*\**/:0px\9;
	width/*\**/:10px\9;
	opacity:0;
	filter:alpha(opacity=0);
	z-index:2;
}
a.upload-img{
	width:165px;
	display: inline-block;
	margin-bottom: 10px;
	height:57px;
	line-height: 57px;
	font-size: 20px;
	color: #FFFFFF;
	background-color: #f38e81;
	border-radius: 3px;
	text-decoration:none;
	cursor:pointer;
}
a.upload-img:hover{
	background-color: #ec7e70;
}

.tc{text-align:center;}


使用
<div class="new-contentarea tc">
<a href="javascript:void(0)" class="upload-img"><label for="upload-file">上传图像</label></a>
<input type="file" class="" name="upload-file" id="upload-file" />
</div>

试试其它关键字

　input　　file按钮美化　

同语言下

可能有用的

贡献的其它代码Label