input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用a标签或其他标签包裹,就实现了美化功能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .a-upload { position: relative; display: inline-block; height: 30px; line-height: 30px; background-color: darkblue; color: white; text-decoration: none; border-radius: 20%; border: 1px solid #ddd; overflow: hidden; padding: 0 10px; margin: 10px; } .a-upload input { position: absolute; opacity: 0; cursor: pointer; filter: alpha(opacity=0); right: 0; } </style></head><body><form enctype="multipart/form-data"> <a href="javascript:" class="a-upload"> <input type="file" name="" id="">上传 </a></form></body></html>
原文地址:https://www.cnblogs.com/lbzbky/p/11028945.html
时间: 2024-07-29 12:33:46