原生<input type="file" name="file" />长得太丑
提升一下颜值
实现方案一、设置input[type=file]透明度为0，使用绝对定位遮罩在自定义的按钮标签层的之上.
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>原生HTML5 input type=file按钮UI自定义</title> 6 <style> 7 .file_upload_box { 8 display: inline-block; 9 width: 200px; 10 height: 60px; 11 position: relative; 12 overflow: hidden; 13 } 14 .file_upload_box input[type=file] { 15 position: absolute; 16 left: 0; 17 top: 0; 18 width: 100%; 19 line-height: 60px; 20 opacity: 0; 21 cursor: pointer; 22 } 23 .file_upload_box a { 24 display: inline-block; 25 width: 100%; 26 line-height: 45px; 27 text-align: center; 28 font-family: "Microsoft yahei"; 29 background-color: #f60; 30 color: #FFF; 31 font-weight: 700; 32 text-decoration: none; 33 } 34 </style> 35 </head> 36 <body> 37 <div class="file_upload_box"> 38 <input type="file" name="file" /> 39 <a href="#none">上传文件</a> 40 </div> 41 </body> 42 </html>
推荐实现方案二、利用label的for属性(for 属性规定 label 绑定到哪个表单元素)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>原生HTML5 input type=file按钮UI自定义</title> 6 <style> 7 .ui_button { 8 display: inline-block; 9 line-height: 45px; 10 padding: 0 70px; 11 color: #FFFFFF; 12 font-family: "微软雅黑"; 13 font-weight: 700; 14 cursor: pointer; 15 } 16 .ui_button_primary { 17 background-color: #FF6600; 18 } 19 label.ui_button:hover { 20 background-color: #d46216; 21 } 22 </style> 23 </head> 24 <body> 25 <label class="ui_button ui_button_primary" for="xFile">上传文件</label> 26 <form><input type="file" id="xFile" style="position:absolute;clip:rect(0 0 0 0);"/></form> 27 </body> 28 </html>