CSS自定义上传文件按钮样式(兼容I6+)
CSS自定义上传文件按钮样式:http://www.alleyloft.com/contents/share?id=14
input type = “file”文件选择表单元素二三事:http://www.zhangxinxu.com/wordpress/2015/11/html-input-type-file/
<!doctype html>! <html> <head> <meta charset="UTF-8"> <title>自定义上传文件按钮</title> <style> *{margin: 0;padding: 0;} .box{ position: relative; float: left; overflow: hidden; } input.uploadFile{ position: absolute; right: 0; top: 0; opacity: 0; filter: alpha(opacity=0); cursor: pointer; width: 276px; height: 36px; overflow: hidden; } a.link{ float: left; display: inline-block; padding: 4px 16px; color: #fff; font: 14px "Microsoft YaHei", Verdana, Geneva, sans-serif; cursor: pointer; line-height: 28px; text-decoration: none; } .filePicker{ margin: 200px; width: 200px; height: 50px; line-height: 50px; text-align: center; color: #fff; background: #00b7ee; } .filePicker label{ display: block; width: 100%; height: 100%; } .filePicker input[type="file"]{ display: none; } </style> </head> <body> <div class="box"> <a href="javascript:;" class="link">浏览</a> <input type="file" class="uploadFile" accept="image/*"> </div> <div class="filePicker"> <input id="img_input" type="file" accept="image/*"> <label for="img_input">上传图片</label> </div> </body> </html>