不得不說(shuō)input file文件域真是丑的一。與頁(yè)面中的元素差異相差太大，而且各個(gè)瀏覽器的顯示效果還不一樣，真不想用這玩意，真頭疼。好吧，說(shuō)點(diǎn)正經(jīng)的，來(lái)聊一聊怎么美化input file文件域。

　　1.最開(kāi)始的做法

　　我一開(kāi)始的想法很暴力，隱藏文件域，設(shè)置一個(gè)按鈕，點(diǎn)擊按鈕用jquery的trigger方法模擬input file文件域的click事件。結(jié)果是FF11，IE8，IE7都可以觸發(fā)click事件，F(xiàn)F11可以觸發(fā)input file的onchange，IE8以及IE7無(wú)法觸發(fā)onchange，也就是input file的value為空，webkit核心的chrome和safari根本連click都無(wú)法觸發(fā)，值得一提的是稍老版本的chrome倒是可以觸發(fā)click。有興趣的可以試試這個(gè)方法。

　　2.改進(jìn)的方法

　　說(shuō)起來(lái)這是做一個(gè)圖片按鈕獲得的靈感。因?yàn)橐峤槐韱?，又懶得用js，所以就將submit按鈕放到了有圖片背景的容器里面。按鈕控件還算好調(diào)教，設(shè)為透明，width、height都設(shè)為100%，絕對(duì)定位blahblah，好用極了，也很有效。我就想文件域是不是也可以這么搞呢，于是就寫(xiě)了個(gè)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;

　　}

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

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

　　left:-155px;

　　top:-22px;

　　width:500%;

　　height:200%;

　　cursor:pointer;

　　font-size:14px;

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

　　@-moz-document url-prefix(){

　　 .file{

　　 left:-155px;

　　 }

　　}

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