直接上代码 效果图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自定义图片上传按钮</title> <style> .btn{ position: relative; display: inline-block; width:75px; height:25px; overflow:hidden; text-align:center; font-size:14px; line-height:25px; vertical-align:center; border:1px solid #23c6c8; color:#333; border-radius: 3px; } .btn:hover{ border:1px solid #23babc; background-color:#23babc; color: #fff; } .btn input{ position:absolute; left: 0; top:0; opacity:0; } </style> </head> <body> <label type="button" class="btn"> <span>选择图片</span> <input type="file"> </label> </body> </html>