2017-01-25

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

最近做了一個 Excel 上傳新增資料的功能,公司 QA 測試時發現不同瀏覽器有不一樣的顯示。聽到這樣的描述,大家一定也馬上聯想到是瀏覽器預設樣式所造成的,解法就是載入Reset css,搞定?! 立馬找個 CDN 加到專案確認一下,果然我的上傳元件統一樣式了,但網站其他東西卻大跑版@@" 看來原本就沒用 Reset css,連 Reset css 都沒有 我想應該也不會有 bootstrap ,只能手刻


原本樣式不同

  • 線上範例: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

IE11

Chrome

CHROME

firefox

firefox

修改後樣式

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

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

  • 線上範例: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

IE11

Chrome

CHROME

firefox

firefox

參考資料

  1. 自訂 input type="file" 格式

沒有留言:

張貼留言