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