將不同瀏覽器的上傳元件(input type='file')樣式統一

將不同瀏覽器的上傳元件(input type=‘file’)樣式統一

最近在公司舊系統上做了一個 Excel 上傳用來新增資料的功能，公司 QA 測試時發現不同瀏覽器有不一樣的顯示。聽到這樣的描述，大家一定也馬上聯想到是瀏覽器預設樣式所造成的，解法就是載入Reset css，搞定？！立馬找個 CDN 加到專案確認一下，果然我的上傳元件統一樣式了，但網站其他東西卻大跑版@@”

馬上理解到系統上原本就沒用 Reset css，連 Reset css 都沒有，果然也沒有 bootstrap ，只能手刻，立馬來回味一下全手工 html 與 css 的傳統風格吧

原本樣式不同

線上範例：jsbin

<div class="x-form-item">
    <label class="inputlabel">Choose a file:</label>
    <div class="x-form-element">
        <input id="file" name="file" class="x-form-text x-form-field inputtext {required:true}" size="40" type="file">
        <button id="submitForm" style="vertical-align:middle;">Submit</button>
    </div>
</div>

IE 11
Chrome
firefox

修改後樣式

客製不是好解法，但我想以後要遇到這樣問題的機會應該也不多，個人覺得應該複用經過公開驗證的元件比自己刻來得好

在畫面上放個透明的 <input type="file"/> 再來用 textbox 跟 button 來統一畫面

線上範例：jsbin

<style>
.filediv{ width:500px; height:25px;  position:relative;}
#filetxt{position:absolute;right:100px;height:19px!important;width:173px}
#filebtn{ position:absolute; left:155px;width:70px;height:25px; }
#file{ width:245px; position:absolute; left:155px; top:0px; opacity:0; outline: none;height: 25px;}
#submitForm{position:absolute;right:40px;width:60px;height:25px;}
</style>
<div class="x-form-item filediv">
    <label class="inputlabel fileContainer">Choose a file:</label>
    <button id="filebtn" >SELECT</button>
    <input id="filetxt" type="text" value="  please choose a file" />
    <input id='file' type="file" name="file" onfocus="this.blur()" class="x-form-text x-form-field inputtext {required:true}" size="40"/>
    <button id="submitForm" style="vertical-align:middle;">Submit</button>
</div>
<script type="javascript/text">
$('#file').change(function(){
                $('#filetxt').val($('#file').val());
            });
</script>

IE 11
Chrome
firefox

參考資料

自訂 input type=“file” 格式

文章目錄

將不同瀏覽器的上傳元件(input type=‘file’)樣式統一

原本樣式不同

修改後樣式

參考資料