文件上傳按鈕input[type="file"]按鈕美化時在IE8中的bug【兼容至IE8】
阿新 • • 發佈：2017-08-20
spl -a class 文件 ati 12px -s filter cursor
首先看一下完成後的效果，鼠標移入可改變為手指的效果。
在此就不加圖標了
<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;
}
文件上傳按鈕input[type="file"]按鈕美化時在IE8中的bug【兼容至IE8】