原生input 为file时修改基础样式（利用label进行修改）

标签：style   red   document   选择   快捷   调用   ati   font   使用   

修改原生Input 的 file输入框的样式

此处使用了障眼法用以实现与element的相同样式

1.在HTML中使用时可以通过input的label进行快捷的输入框调用

        <div>
            <label for="file" style="position: absolute;">
              <div class="fileButton">选择文件</div>
            </label>
            <input type="file"
                   id="file"
                   style="margin-left:3px;color:red;"
                   name="myfile"
                   accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
            <div>只能上传excel(xls/xlsx)文件，且不超过3M</div>
       </div>

2.在CSS中通过设置label的样式进行对input的调用

.fileButton {
  height: 30px;
  line-height: 30px;
  border-radius: 3px;
  background-color: #409eff;
  color: #fff;
  font-weight: 400;
  display: inline-block;
  padding: 0 10px;
  cursor: pointer;
}

原生input 为file时修改基础样式（利用label进行修改）

标签：style   red   document   选择   快捷   调用   ati   font   使用   

原文地址：https://www.cnblogs.com/xujiuran/p/14757297.html