<meta charset="UTF-8"> <title>上传按钮</title> <style> *{ padding: 0; margin: 0; } .btn{ width: 100px; height: 28px; line-height: 28px; color: #fff; background: #538de3; border-radius: 6px; margin: 30px auto; position: relative; text-align: center; cursor: pointer; } .btn input{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0); cursor: pointer; } </style> </head> <body> <div class="btn"> <input type="file">上传文件 </div>
input file上传按钮的美化思路是，先把之前的按钮透明度设置为0,外层包裹div.就实现了美化功能