input type="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中在文本區域中需要雙擊才能彈出窗口,這也是我利用上面提到的共同特性的第三點的原因。

示例代碼如下:


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1. 瀏覽器頁面有哪三層構成,分別是什么,作用是什么? 構成:結構層、表示層、行為層分別是:HTML、CSS、Ja...
    程序猿人王小賤閱讀 1,894評論 1 11
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,796評論 1 92
  • 一、JS前言 (1)認識JS 也許你已經了解HTML標記(也稱為結構),知道了CSS樣式(也稱為表示),會使用HT...
    凜0_0閱讀 2,798評論 0 8
  • 界面是軟件與用戶交互的最直接的層,界面的好壞決定用戶對軟件的第一印象。而且設計良好的界面能夠引導用戶自己完成...
    A夢想才讓心跳存在閱讀 1,057評論 0 4
  • 轉載請聲明 原文鏈接地址 關注公眾號獲取更多資訊 第一部分 HTML 第一章 職業規劃和前景 職業方向規劃定位...
    前端進階之旅閱讀 16,620評論 32 459