效果图
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>革新input</title> <style></style> </head> <body> <input type="checkbox" name="" id="" /> <input type="file" /> <hr /> <!-- 办法1: 点击label相当于点击了input --> <style> .checkbox1 { display: none; } .checkbox1 + i { /* content: " "; */ display: inline-block; font-style: normal; width: 20px; height: 20px; border-radius: 50%; background-color: #c0c0c0; } .checkbox1:checked + i { background-color: hotpink; } .checkbox1 + i::after { } .checkbox1:checked + i::after { content: " "; display: inline-block; margin: 5px; width: 10px; height: 10px; border-radius: 50%; background-color: #c0c0c0; } </style> <label> <input type="checkbox" class="checkbox1" /> <i></i> </label> <!-- 办法2: 设置input的opacity为0, 定位形式为相对定位 --> <style> .btn { position: relative; display: inline-block; text-align: center; color: #fff; text-decoration: none; width: 80px; height: 32px; line-height: 32px; background: #409eff; border-radius: 3px; font-size: 12px; vertical-align: middle; margin-left: 10px; } input[name="file"] { opacity: 0; width: 100%; height: 100%; position: absolute; left: 0; } </style> <a href="javascript:void(0)" class="btn"> 上传文件 <input type="file" id="file" name="file" @change="uploadFile" /> </a> </body></html>