標(biāo)簽： 前端
大家都知道各瀏覽器對(duì)文件上傳輸入框的表現(xiàn)形式不一治笨，如下圖：
文件上傳輸入框
前幾天發(fā)現(xiàn)好多同學(xué)在項(xiàng)目中的做法都是將input type=file的opacity設(shè)置為0知举，然后加一個(gè)浮層，用于改變輸入框的樣式贪磺。
那么問題來了！
寶寶們都忽略了在舊版本Firefox，Opera瀏覽器以及IE9以下犀农，文件輸入框的形式是一條長(zhǎng)長(zhǎng)的輸入框，帶一個(gè)按鈕宰掉，所以就會(huì)造成按鈕的單擊區(qū)域只有后半段呵哨，前半段只有雙擊才能實(shí)現(xiàn)文件上傳。
解決方案
給文件上傳框設(shè)置一個(gè)很大很大的字號(hào)轨奄，于是在舊版本瀏覽器下就只能點(diǎn)到按鈕啦孟害！
.uploadFile {
opacity: 0;
filter: alpha(opacity:0);
cursor: pointer;
position: absolute;
left: 0;
top: 0;
font-size: 999px; //設(shè)置一個(gè)很大很大的字號(hào)，讓右側(cè)按鈕撐開
overflow: hidden; // 把超出部分隱藏
}
項(xiàng)目中：前臺(tái)“上傳logo”挪拟，后臺(tái)各種碼上傳圖片挨务，上傳音視頻按鈕都存在此類現(xiàn)象。
各位有空看到可以改一下玉组。
作者 @鄭小明
2016 年 08 月 16 日
