input type=“file“ 文件上传类型输入框样式修改方法

原生样式：

需要样式：

实现方法：

创建一个 元素，实现上面的样式，然后将 input 覆盖在该元素上，并将input透明度设置为0，这样就看不到input原始样式，点击元素可以实现文件上传功能

代码示例：

<div className="project-img-btn">
   <input type="file" className="picUpload"/>
    <img className="add-icon" src="加号图标地址" alt="" />
    <div className="add-text">上传图标</div>
</div>

.project-img-btn {
    
    
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .add-icon {
    
    
        display: block;
        width: 16px;
        height: 16px;
        margin-bottom: 8px;
      }
      .add-text {
    
    
        color: #999;
        font-size: 12px;
        line-height: 1;
      }
}
.picUpload {
    
    
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      outline: medium none;
      cursor: pointer;
      -moz-opacity: 0;
      opacity: 0;
      filter: alpha(opacity=0);
}