很多时候上传文件或者上传视频的时候我们希望点一个icon或者类似按钮的图片来实现点击之前选择文件的需求
我在这里提供一个方案，是利用css的box-sizing:border-box配合padding实现效果如下：
原理：设置input元素的背景图片，然后将图片上下居中，通过设置box-sizing:border-box,配合padding将原有的选择文件字样隐藏
box-sizing属性有两个取值：
- content-box : 规定在设定的宽度和高度之外绘制元素的内边距（
padding）和边框 - border-box ：从已设定的宽度和高度分别减去边框和内边距（
padding）才能得到内容的宽度和高度。
因为我这里限定了元素的宽高，设置了内边距（padding：120px 0 0 0）和box-sizing: border-box也就是说其实浏览器只渲染出我限制的宽高内的内容，而原先的选择文件字样由于padding:120px 0 0 0的缘故已经被顶到这个背景图片的下面部分了，你可以尝试在浏览器中勾选或者不勾选box-sizing: border-box选项来展示或隐藏选择文件字样.
Tips:
由于GIF示范的demo是在移动设备上展示的，所以在使用的时候可对padding的值进行调整，必要时结合overflow:hidden
如果你有更好的实现方式，可在评论区发表，大家一起学习成长~
