IE自定義上傳按鈕游標閃爍,雙擊上傳問題解決
阿新 • • 發佈:2019-02-06
我們使用自定義上傳按鈕,一般將input type=”file”透明覆蓋在自定義按鈕的上面
<span class="file">
<em class="iconfont icon-xuanzezhaopian"></em>
選擇照片<input type="file" class="do-upload-banner" multiple="" name="file" id="">
</span>
這樣寫在非IE的情況下沒有什麼問題,當時當在IE裡會出現噁心的游標閃爍
在IE11下解決方法很簡單,只需要將 font-size
font-size: 0;
width: 100%;
height: 100%;
這種方法沒法解決IE10-需要點選兩次才能上傳的問題,首先在這我們需要弄明白為什麼IE10-需要點選兩次才能調出檔案選擇框
知道什麼原因就好解決了,只要想辦法將右邊的瀏覽按鈕填充滿整個容器就好了
left: auto !important;
right: 0;
font-size: 100px;
width: 200%;
height: 130%;
然而這裡的程式碼和IE11中的有些程式碼衝突,所以在這裡我們需要使用CSS Hack處理
.cursor-blink {
font-size : 0;
width: 100%;
height: 100%;
left: auto\9 !important;
right: 0\9 !important;
font-size: 100px\9;
width: 200%\9;
height: 130%\9;
}
注意這裡需要將 font-size
儘量設定大一些,如果不設定,依舊是雙擊才能調出檔案選擇框