自定義檔案上傳按鈕
阿新 • • 發佈:2019-01-23
WEB開發中,不同的瀏覽器對於<input type="file">標籤顯示的樣式是不一樣的,可能帶來不好的使用者體驗。下面介紹下檔案上傳按鈕的使用者自定義樣式的實現方法。
1、HTML程式碼
<div class="new-contentarea">
<a href="javascript:void(0)" class="btn-upload-img">選擇圖片</a>
<input type="file" class="" name="upload-file" id="upload-file"/>
</div>
實現原理:
<a>和<input>兩個元素,設定大小一致,<input>設定相對定位,top和left屬性使得與<a>按鈕重疊,這樣便實現了使用者自定義的樣式。
2、CSS程式碼
同理用圖片蓋住上傳按鈕,可以實現點選圖片上傳檔案的功能.new-contentarea{ width: 165px; overflow:hidden; margin: 0 auto; position:relative; display: inline; } .btn-upload-img{ background-color: #f3fbff; border: 1px solid #bfe2fa; border-radius: 5px; color: #148ed5; display: inline-block; font-size: 14px; line-height: 36px; text-align: center; padding: 0 10px; } .new-contentarea input[type=file]{ background: #333 none repeat scroll 0 0; height: 36px; left: 0; margin: 0; opacity: 0; position: absolute; top: -7px; width: 77px; z-index: 2; }