巧妙利用label標簽實現input file上傳文件自定義樣式


 

  提到上傳文件,一般會想到用input file屬性來實現,簡單便捷,一行代碼即可

  

    input file原生提供的默認樣式大多情況下都不符合需求,且在不同瀏覽器上呈現的樣式也不盡相同

  

   我們往往需要為其自定義樣式,而直接對input添加樣式是一件麻煩的事,

  因為input本身有默認的樣式,我們需要一一覆蓋,並且一些樣式我們也無法覆蓋,

  比如你想把選擇文件的字體顏色設置為和未選擇任何文件的字體顏色一樣,就無法實現

  

 

  以前遇到該問題時,我會新建一個div,給它添加相應樣式,然后定位覆蓋在原生input上面,

 這樣的做法雖然略顯笨拙,但好在能夠實際解決問題

  

 現在有一種更好的方法可替代上面方法,那就是使用label標簽,

 用label標簽的for屬性關聯到input文件輸入框,點擊label標簽時會觸發input文件輸入框的點擊,

   打開瀏覽文件的對話框,相當於點擊了文件輸入框,記得把input隱藏掉

<!-- 自定義樣式 -->
        <label for="file-input">label</label>
        <input type="file" id="file-input"  style="display: none;" multiple="multiple" />

  注:上面代碼中的multiple屬性表示上傳文件時可多選,不加該屬性默認只能選一個文件上傳

  參考原文

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM