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

0.写在前面

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

上传图片<input type="file" name="fn">

在谷歌浏览器使用该标签的样式
再看一个我通过修改CSS实现的样式：

呃，虽然只是个没什么特色的绿底白字的样式，但是总比初始的感觉好吧... 言归正传，当你明白了修改input type="file"按钮的原理后，自然可以设计出更佳的样式。

1.修改原理（分步讲解）

<div class="filebutton"><div>上传图片</div><input type="file" name="fn"></div>

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

现在我们先来改下包裹文字的div样式：

.filebutton div{
    font-size: 25px;
    background: #00ff7f;
    color: white;
    padding: 10px 15px;
}

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

.filebutton{
    position: relative;
}
.filebutton input{
    position: absolute;
    top: 0;
}

“上传图片”这按钮太长了，理想的状态是使他的宽度随文本长度而变，且我们可以使用padding等属性调整，于是父div里加上display: inline-block：

.filebutton{
    position: relative;
    display: inline-block;
}

宽度也调整好了，但总不能使用这个样子的按钮吧，那就将它透明度设置为'0'隐藏起来(opacity: 0;):

.filebutton input{
    position: absolute;
    top: 0;
    opacity: 0;
}

现在看起来似乎没什么问题了，但实际上这个按钮现在的响应区域有很大问题：
实际响应区域
现在增大input中的font-size来增大响应区域：

.filebutton input{
    position: absolute;
    top: 0;
    opacity: 0;
    font-size: 100px;
}

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

.filebutton input{
    position: absolute;
    top: 0;
    /*opacity: 0;*/
    font-size: 100px;
}

实际上这句文字所在行才是真正的响应区域，也许你已经有对策了，在父div里设置"overflow:hidden"

.filebutton{
    position: relative;
    display: inline-block;
    overflow: hidden;
}

响应区域调整完成。
最后取消掉opacity:0的注释，大功告成！

2.完整CSS代码

.filebutton{
    position: relative;
    display: inline-block;
    overflow: hidden;
}
.filebutton input{
    position: absolute;
    top: 0;
    opacity: 0;
    font-size: 100px;
}
.filebutton div{
    font-size: 25px;
    background: #00ff7f;
    color: white;
    padding: 10px 15px;
}

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

若你有其他的修改方法，欢迎一起讨论~