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