我们在css中修改file的表单样式是一件比较麻烦的事情，最近学习到一种方法，隐藏表单的样式，添加一个div，div添加事件，触发表单事件，原理上等同于修改了file的样式。

另外写一个按钮的样式，然后将自己写的按钮和这个默认的样式的定位改为重合，并将默认的按钮设置opacity:0，即设置透明度为完全透明，这样就可以在表面上是点击自己定义的样式，而实际上是点击input这个按钮。

1、重写一个新的样式
2、将默认样式设置display:none;，即设为不可见
3、在js里调用：当点击新样式的时候，调用这个input的点击事件

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>上传</title>  <style>    .bg {      display: flex;      justify-content: center;      align-items: center;      width: 1920px;      height: 1080px;      background: url('./bg.jpg')no-repeat center / 100%;    }    .file1 {      display: none;    }    .img_one {      width: 300px;      height: 100px;    }  </style>  <script src="../jquery-1.11.1.min.js"></script></head><body>  <div class="bg">    <img src="./banner3.png" alt="" class="img_one">    <input type="file" class="file1">    <button>提交</button>  </div>  <script>    $(document).ready(function () {      $('.img_one').click(function () {        $('.file1').click()      })    })  </script></body></html>

代码如上

实际如下

提交按钮是另写有兴趣可以同理，不过button比较好修改