`<input type="file">`的样式重置问题

<input type="file">的样式重置简单方法

HTML部分

<label for="">
    <span></span>
    <input  type="file" multiple accept="image/jpeg,image/png,image/gif,image/bmp">
</label>

span用于设置上传图片的照相机Icon等。

input 的accept属性表示支持何种格式的文件（后缀），multiple代表支持多个文件上传。

CSS样式

核心：使本来的input元素的opacity为0且占满整个父元素(可能是某个div)，使得点击这个div均可以触发点击效果。

input[type=file]{
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    height: 100%;
    width: 100%;
}

增强 ： 加上一个居中照相机icon

给span进行修饰

.classname span{
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
}