关于type="file"的input框样式修改

表单中的input type=”file”在前端开发中经常会用到，很悲剧的是input type=”file”在各个浏览器下表现不统一，样式很难起作用；下面具体解决方法：

1.图片定位叠加方案

就是通过将type="file"这个上传按钮透明后，然后叠加在一个图片上

#up-button{
            cursor: pointer;
            opacity: 0;
            /*ie低版本不支持opacity的  只支持filter
为了兼容*/
            width: 100px;
            filter: alpha(opacity=0);
            outline: none;
        }

<a href="javascript:void(0)"><input type="file" id="up-button"/></a>
2.webkit的方案-webkit-file-upload-button 

只有对webkit内核有效，如果不支持带-webkit-前缀的写法，就没任何效果了

代码如下:

<input type="file" id="upfile">

input[type="file"]::-webkit-file-upload-button {position: absolute;top: 10px;left: 10px;width: 64px;height: 64px;overflow: hidden;line-height: 99em;background:url(‘’) no-repeat 0 0;border: 0 none;z-index: 2;}