input(file)瀏覽按鈕美化

首先我們先要了解一下各瀏覽器的瀏覽按鈕的共同特性：

1. 都可以設定整體的寬度和高度，但在IE、火狐、Opera中設定寬度不影響瀏覽按鈕的寬度；
2. 谷歌中只要是input的區域單擊可彈出視窗；IE（IE6中沒試）中，單擊瀏覽按鈕可以彈出視窗，雙擊文字框區域可以彈出視窗；火狐和Opera中，單擊input任何區域都可以彈出視窗；
3. 設定input字型大小，IE、火狐、Opera的流量按鈕都變大了（寬與高）。（這點很重要）；

從上面的共同特性來看，只要第三條是我們最需要的。
現在我們可以開始美化了：

思路：
先用a標籤做一個按鈕，定好寬度並要加上overflow:hidden;屬性，然後將放在a標籤裡面，通過定位，將input相對於a的右上角對齊，最後將input的透明度設為0即可。

為何要右上角對齊？
之所以右上角對齊是因為在IE、火狐、Opera中，滑鼠放在文字框上滑鼠呈文字狀態，還有一個原因是IE中在文字區域中需要雙擊才能彈出視窗，這也是我利用上面提到的共同特性的第三點的原因。

示例程式碼如下：

<style>
a{display:inline-block;
 width:100px; height:40px; background:red; position:relative; overflow:hidden;}
a:hover{background:green;}
input{position:absolute;
 right:0; top:0; font-size
 
:100px; opacity:0; filter:alpha(opacity=0);}
</style>

<a href="#">
    <input type="file" value="瀏覽" />
</a>

這樣各個瀏覽器的input瀏覽按鈕的樣式就達到了一致的效果，file按鈕樣式美化搞定。