本文解决这个问题用到的伪元素是 ::file-selector-button
-
首先创建一个上传文件按钮：
2. 清除按钮的默认样式（重点来啦）：
.file { color: transparent; width: 50px; } .file::file-selector-button { display: inline-block; color: transparent; background-color: transparent; border: 0; cursor: pointer;
width: 50px; height: 50px;
}
当你设置完这些之后你就会神奇的发现，按钮不见了，只留下了一个宽高都是50px的方框。（宽高根据自己需求调整）
3. 接下来你就可以在这个白板上面进行绘制了。下面是我的作品：
4. 完整代码（附带解析）：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Test</title> <style> .file { /* 将“未选择文件”文字设置透明 */ color: transparent; width: 50px; } .file::file-selector-button { display: inline-block; /* 将按钮中“选择文件”文字变透明 */ color: transparent; /* 背景颜色变透明 */ background-color: transparent; /* 不设置边框 */ border: 0; /* 移动上面有小手 */ cursor: pointer; /*** 至此上面设置完毕后，整体会变成白色，那么你就可以在上面进行绘制你的上传文件按钮了。 ***/ /* 从此向下是本人DIV 简单制作的案例。 */ width: 50px; height: 50px; background: url(./cloud\ upload-fill.png) no-repeat; background-size: cover; opacity: 0.5; transition: 0.5s linear; } .file::file-selector-button:hover { opacity: 1; } </style> </head> <body> <input type="file" class="file" /> </body></html>
5. 录屏转GIF软件（不是广告，只是觉得好用）：screentogif
