文件上传按钮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;
}