要想直接通過 CSS 來控制文件上傳控件，基本沒戲的。當然也有一些解決方案，例如 Mr.Think 的這篇文章《利用label標簽和CSS美化文件上傳表單(不兼容IE6)》。昨天也恰好遇到了這個問題，順手記錄下吧。
首先，給 <input type="file"> 元素戴個套子，這樣比較安全嘛，是不是？看代碼：
<span class="input-file">瀏覽...<input type="file"></span>
有了這個安全的外層容器，我們就可以開搞了。問題的核心有兩點：第一，把丑陋的原生上傳控件給藏起來；第二，支持點擊上傳功能。
關鍵的代碼片段：
.input-file {overflow:hidden;position:relative;}.input-file input{opacity:0;filter:alpha(opacity=0);font-size:100px;position:absolute;top:0;right:0;}其中，字體大小 100px 的原因在于放大上傳控件右側的按鈕區域，結合靠右定位，能夠保證鼠標 cursor 為 default 狀態。
另外，如果要支持鼠標懸停效果，也是可以的，把 span 標簽改成 a 標簽，然后加上 hover 偽類就可以了。
<a href="javascript:void(0);">瀏覽...<input type="file"></a>
貌似是全兼容的？反正 IE 是可以的。自己看吧，懶得看兼容了。
演示：
提示：可修改后代碼再運行!
程序員人生，我編程，我富裕，記住wfuyu網，php教程，php學習，php手冊，CMS模版制作
聲明：本站大部分內容是作者原創，少部分收集于互聯網供大家一起學習，原版權很多不明，如有侵權請聯系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權所有
