关于修改＜input type=‘file‘＞自定义上传样式

哈喽 大家好啊  最近遇到一个问题，就是上传文件<input type="file">样式自定义

1.首先讲input设置display:none

 input[type=file] {
  display: none;
}

 2.然后写一个label，这里面写我们自己定义的class样式

特别注意,label 有一个for 样式和input的id保持一致

label中的for属性规定了label与哪个表单元素绑定。for属性的值和表单元素的id值一样，即可完成该label标签与该表单元素的绑定。

<div class="enCodeFileUpload-container">'
     <div class="webuploader-pick">'
          <label class="lee-upload-fileicon l-icon-upload-big" for="fileUpload">
            文件解密            
          </label>'
           <input type="file"  onchange="sendFile(event)" id="fileUpload"/>'
     </div>'
</div>'

 如上所示，该label便签和input便签完成了绑定，当鼠标点击“label标签”时，input元素会被触发，用户即可完成输入。

.enCodeFileUpload .enCodeFileUpload-container .webuploader-pick:hover {
    border: 1px dashed #2A87FF;
}
.enCodeFileUpload .enCodeFileUpload-container .webuploader-pick input:hover {
    cursor: pointer;
}
.enCodeFileUpload .enCodeFileUpload-container .webuploader-pick input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: none;
    border: none;
}
.enCodeFileUpload .enCodeFileUpload-container .webuploader-pick {
    position: relative;
    display: inline-block;
    cursor: pointer;
    padding: 5px 10px;
    text-align: center;
    border-radius: 2px;
    overflow: hidden;
    border-color: #2A87FF;
    box-shadow: none;
    background: #FAFCFD;
    border: 1px dashed #D8DFED;
    border-radius: 6px;
}

参考原文：

(1条消息) 如何更简单地更改 input type=file 文件选择框的样式_Web_boom的博客-CSDN博客

(1条消息) label标签中的for属性_label for_在线小白www的博客-CSDN博客