文件上传按钮input[type="file"]按钮美化时在IE8中的bug【兼容至IE8】

首先看一下完成后的效果，鼠标移入可改变为手指的效果。

在此就不加图标了

<label class="file-upload">
　　<span>上传附件</span>
　　<input type="file" name="">
</label>

　　在IE8中需要将input透明后还不能完全达到效果，还需要将字体设大一些，撑开input，这是IE自带的兼容问题。

.file-upload{
	display: inline-block;
	width: 120px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	color: #fff;
	position: relative;
	overflow: hidden;
	background:#3AA1F5;
	margin-left: 15px;
}
.file-upload input{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	opacity: 0;
	filter:Alpha(opacity=0);
	color: transparent;
	width: 100%;
	height: 100%;
	cursor: pointer;
	font-size: 100px;
	background:transparent;
}
.file-upload span{
	margin: 0 5px;
	font-size: 12px;
}

　　

 

转载于:https://www.cnblogs.com/pomelott/p/7400554.html