Question

自定义input file样式及原理讲解

Answer 1

当有要上传文件需要的时候常会用到 <input type="file"> ，但它默认的样式确实有些影响使用体验......

这是html中的内容，文本和 input 标签被一个 class 为 filebutton 的 div 标签包裹起来，其中文本“上传图片”也被一个单独的 div 标签包裹起来，这里使用 div 标签的原因是： 便于之后更改按钮大小 。
先看下未加css的效果：

自然，现在点击“上传图片”这块区域是不管用的，现在要做的就是使“选择文件”的响应区域与之重合。
尝试将“选择文件”按钮移入“上传图片”区域：

现在按钮内所有区域都能响应了，但你会发现，按钮外的很大一部分区域也会响应...
注释掉 opacity:0 来看看现在的真实效果：

这样设置也有不好的地方，选择文件后不会像之前一样文字显示选中了哪个文件，但没关系，将鼠标在按钮处停滞一会就可以知道选中了什么文件：