自定义input file样式

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

 

 修改：

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

现在我们先来改下包裹文字的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的注释，大功告成！