使用場景：
在未使用UI庫時免不了會用到各種上傳文件，那么默認的上傳文件樣式無法達到項目的要求，因此重寫（修改）上傳文件樣式是必然的，下面的效果是最近項目中自己寫的一個效果，寫出來做個記錄方便以后使用；
默認效果及選擇文件后效果：
修改后的效果：
以下是相應的代碼：
<!doctype html> <html> <head> <title></title> </head> <style type="text/css"> .file{ margin-top: 20px; margin-left: 20px; } .block { margin-bottom: 30px; margin-top: 20px; height: 30px; line-height: 30px; } .block span { display: inline-block; width: 100px; text-align: right; font-size: 14px; float: left; margin-right: 15px; } .block input { background: #363738; height: 30px; width: 300px; border: #363738; color: #ffffff; padding-left: 15px; } .block .block-label { width: 220px; height: 30px; background: #363738; margin: 0; float: left; padding-left: 15px; color: #fff; } /* 文件上傳樣式 */ .btn_addPic { display: inline-block; position: relative; width: 80px; height: 30px; overflow: hidden; border: 1px solid #f9c100; background: #f9c100; color: #000; cursor: pointer; text-align: center; font-size: 14px; } .btn_addPic:hover { cursor: pointer; } .filePrew { display: block; position: absolute; top: 0; left: 0; width: 140px; height: 39px; font-size: 100px; opacity: 0; filter: alpha(opacity=0); /* 兼容IE */ } </style> <body> <div class="file"> <input type="file" name="" id=""> <input type="file" name="" id=""> </div> <div class="block"> <span>CAD圖紙：</span> <label class="block-label" for="fileupload" id="label"></label> <a class="btn_addPic" href="javascript:void(0);" id="fileupload"> 選擇 <input class="filePrew" type="file" accept="images/*" id="upload" onchange="getFileSize(this.value)"> </a> </div> <script> var card = document.getElementById('label'); function getFileSize(v) { card.innerText = v; console.log(v) } </script> </body> </html>
可直接復制粘貼查看效果！
一分積累，一份收獲，願大家每天都有進步！