代码干货 | 自定义文件上传控件样式-input透明法

本文来源于阿里云-云栖社区，原文点击这里。

自定义文件上传控件样式-input透明法。

作为一个刚入坑不久的程序小白，今天和一个自定义<input type="file">控件的工作斗智斗勇了一上午。通过各种膜拜大神们的资料，总算最后有了一个还算看的过去的解决方案，来记录一下。

页面中，<input type="file">控件的默认显示

在Chrome中是这样：
在IE里是这样：

要如何使它变成下面这样，点击此区域也能上传文件呢？

原理：将input放进一个具有背景的div标签中，并且使input透明。

html代码：

<div class="inputbg"><input type="file"></div>

css代码：

.inputbg{
    background: url(bg.jpg) no-repeat;
    position: relative;
    width: 311px;
    height: 162px;
}
.inputbg input{
    position: absolute;
    top: 0;
    left: 0;
    opacity:0;
    filter:alpha(opacity=0);
    width: 311px;
    height: 162px;
    cursor: pointer;
}
</style>

这个时候浏览器里显示是这样的。

>>>展开全文