input[type="file"]的樣式在各個瀏覽器中的表現不盡相同:
1. chrome:
2. firefox:
3. opera:
4. ie:
5. edge:
另外,當我們規定 input[type="file"] 的高度,並把它的行高設定成與其高度相等後,chrome中難看的樣式出現了:
「未選擇任何文件」這一行並沒有豎直居中。
似乎在 firefox 中好看一些,嗯,我比較喜歡用 firefox。但是這些瀏覽器中的表現不一致,我們必須做相容處理。
思路:
1. 自訂與其中一個瀏覽器表現類似的樣式,將其放在下層;
2. 將瀏覽器本身的表現出來的樣式“隱藏掉”, opacity: 0; 置於上層,這樣我們點擊的才是 input[type="file"] 響應的事件;
3. 選擇檔案或改變檔案後,改變顯示 file 的值。
代碼:
html: <form action="" class="activityForm"> <div class="file"> <label for="file">文件:</label> <div class="userdefined-file"> <input type="text" name="userdefinedFile" id="userdefinedFile" value="未选择任何文件"> <button type="button">上传</button> </div> <input type="file" name="file" id="file"> </div> </form>
css: .file { position: relative; height: 40px; line-height: 40px; } .file label { display: inline-block; } .userdefined-file { position: absolute; top: 0; left: 60px; z-index: 2; width: 300px; height: 40px; line-height: 40px; font-size: 0; /*应对子元素为 inline-block 引起的外边距*/ } .userdefined-file input[type="text"] { display: inline-block; vertical-align: middle; padding-right: 14px; padding-left: 14px; width: 220px; box-sizing: border-box; border: 1px solid #ccc; height: 40px; line-height: 40px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .userdefined-file button { display: inline-block; vertical-align: middle; width: 80px; text-align: center; height: 40px; line-height: 40px; font-size: 14px; background-color: #f54; border: none; color: #fff; cursor: pointer; } .file input[type="file"] { position: absolute; top: 0; left: 60px; z-index: 3; opacity: 0; width: 300px; height: 40px; line-height: 40px; cursor: pointer; }
js: document.getElementById("file").onchange = function() { document.getElementById("userdefinedFile").value = document.getElementById("file").value; }
這樣處理後,就在各個瀏覽器中表現一致了:
1. 未選擇任何檔案時,在 chrome 中:
2. 在選擇檔案後,在 firefox 中: