不得不說input file文件域真是丑的一。與頁面中的元素差異相差太大，而且各個瀏覽器的顯示效果還不一樣，真不想用這玩意，真頭疼。好吧，說點正經的，來聊一聊怎么美化input file文件域。

　　1.最開始的做法

　　我一開始的想法很暴力，隱藏文件域，設置一個按鈕，點擊按鈕用jquery的trigger方法模擬input file文件域的click事件。結果是FF11，IE8，IE7都可以觸發click事件，FF11可以觸發input file的onchange，IE8以及IE7無法觸發onchange，也就是input file的value為空，webkit核心的chrome和safari根本連click都無法觸發，值得一提的是稍老版本的chrome倒是可以觸發click。有興趣的可以試試這個方法。

　　2.改進的方法

　　說起來這是做一個圖片按鈕獲得的靈感。因為要提交表單，又懶得用js，所以就將submit按鈕放到了有圖片背景的容器里面。按鈕控件還算好調教，設為透明，width、height都設為100%，絕對定位blahblah，好用極了，也很有效。我就想文件域是不是也可以這么搞呢，于是就寫了個demo。

<span class="button">
 <a>上傳</a>
 <input type="file" name="file" id="file" class="file" />
</span>

　　.button{

　　width:100px;

　　height:50px;

　　line-height:50px;

　　border:1px solid #cccccc;

　　background:#eeeeee;

　　border-radius:3px;

　　position:relative;

　　display:inline-block;

　　text-align:center;

　　overflow:hidden;

　　}

　　.file{

　　filter:alpha(opacity: 0);

　　opacity:0;

　　position:absolute;

　　left:0;

　　top:0;

　　width:100%;

　　height:100%;

　　display:block;

　　cursor:pointer;

　　}

　　在各個瀏覽器查看了效果，ff根本就不鳥你的height100%，其他瀏覽器均ok，感覺很蛋疼。好吧，那就給file加大字體好了，只要字體高度大于按鈕的高度就好了。你也可能發現了，雖然設置了cursor，但是各個瀏覽器的還是不能一致的顯示小手，設為不透明，fontsize默認，看了下各個瀏覽器下的效果，如下圖：

　　好吧，FF下只有文件域的按鈕是小手圖標，chrome和safari正好相反，ie倒是不錯，顯示效果與預期一致。如果想要顯示效果一致，我想我們可以用一些hack的方法，想到這里，真的感覺想要在地上滾來滾去。。正如圖上所示，我們完全可以把不能顯示小手圖標的部分通過絕對定位隱藏掉。FF是文本框部分，chrome及safari是button部分，增加文件域的width及height我們就往左上角移動就好了。通過我蛋疼的測試，ff根本就不鳥文件域的文本框部分height和width屬性，倒是可以正確的顯示button的height，所以只要把文本框從左側遮住就好了。對于webkit核心，從上方遮住按鈕就好了。通過蛋疼的測試(font-size為14px)絕對定位如下：

　　left:-155px;

　　top:-22px;

　　width:500%;

　　height:200%;

　　cursor:pointer;

　　font-size:14px;

　　此時為了照顧ff，容器寬度就只能設置為固定的65px才能正好顯示完全文件域的按鈕部分。但是此時問題又來了，ie8及ie7中文件域中的文本框部分必須雙擊才能打開選擇文件窗口，都蛋疼的走到這一步的了，看來不再差一點更蛋疼的方法了—-firefox hack。哇哈哈，ff也有這一天。。我們把上面的left設為0，加入如下代碼

　　@-moz-document url-prefix(){

　　 .file{

　　 left:-155px;

　　 }

　　}

　　這下就大功告成了，蛋疼版的完美美化文本域，好吧，提供兩個demo大家可以看下效果，onchage也可以觸發的。