檔案上傳按鈕input[type="file"]按鈕美化時在IE8中的bug【相容至IE8】

標籤：bsp   nbsp   display   class   分享   效果   upload   flow   log   

首先看一下完成後的效果，滑鼠移入可改變為手指的效果。

在此就不加表徵圖了

<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】