首先我們先要了解一下各瀏覽器的瀏覽按鈕的共同特性：
1、都可以設置整體的寬度和高度，但在IE、火狐、Opera中設置寬度不影響瀏覽按鈕的寬度；
2、谷歌中只要是input的區域單擊可彈出窗口；IE（IE6中沒試）中，單擊瀏覽按鈕可以彈出窗口，雙擊文本框區域可以彈出窗口；火狐和Opera中，單擊input任何區域都可以彈出窗口；
3、設置input字體大小，IE、火狐、Opera的流量按鈕都變大了（寬與高）。（這點很重要）；
從上面的共同特性來看，只要第三條是我們最需要的。
現在我們可以開始美化了：
思路：先用a標簽做一個按鈕，定好寬度並要加上overflow:hidden;屬性，然后將<input type="file" />放在a標簽里面，通過定位，將input相對於a的右上角對齊，最后將input的透明度設為0即可。
為何要右上角對齊？
之所以右上角對齊是因為在IE、火狐、Opera中，鼠標放在文本框上鼠標呈文本狀態，還有一個原因是IE中在文本區域中需要雙擊才能彈出窗口，這也是我利用上面提到的共同特性的第三點的原因。
示例代碼如下：
|
1
2
3
4
5
6
7
8
9
|
<
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按鈕樣式美化搞定。