修改input type=file 默认样式最后将input的透明度设为0即可。

原理

先用a标签做一个按钮，定好宽度，然后将input放在a标签里面，通过定位，将input相对于a的左上角对齐，最后将input的透明度设为0即可。

代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>文件上传按钮修改样式</title>
  <style>
    .file {
      position: relative;
      display: inline-block;
      border: 1px solid rgba(154, 154, 154, 1);
      border-radius: 4px;
      width: 60px;
      height: 28px;
      color: #303133;
      line-height: 28px;
      text-align: center;
      text-decoration: none;
      text-indent: 0;
      font-size: 14px;
    }

    .file input {
      position: absolute;
      width: 60px;
      top: 0;
      left: 0;
      bottom: 0;
      opacity: 0;
      cursor: pointer;
    }

    .file:hover {
      background: linear-gradient(to right, #FFAD4A 0, #FF9362 50%);
      background: -webkit-linear-gradient(to right, #FFAD4A 0, #FF9362 50%);
      border-color: #FFAD4A;
      color: #fff !important;
      text-decoration: none;
    }
  </style>
</head>

<body>
  <a href="javascript:;" class="file">选择文件<input type="file" ></a>
</body>
</html>

问题

绝对定位，要设置宽度