`<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%;
}