使用场景：
在未使用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>
可直接复制粘贴查看效果！
一分积累，一份收获，愿大家每天都有进步！