最好的方法是使用伪元素:after或:before作为显化de input的元素。然后按照您的意愿设置该伪元素的样式。我建议你为所有输入文件做一个通用的样式，如下所示:

input {
  height: 0px;
  outline: none;
}

input[type="file"]:before {
  content: "Browse";
  background: #fff;
  width: 100%;
  height: 35px;
  display: block;
  text-align: left;
  position: relative;
  margin: 0;
  margin: 0 5px;
  left: -6px;
  border: 1px solid #e0e0e0;
  top: -1px;
  line-height: 35px;
  color: #b6b6b6;
  padding-left: 5px;
  display: block;
}

$ (' .new_Btn ') .click(函数(){ $ (' # html_btn ') .click (); })； .new_Btn { // CSS属性 ｝ # html_btn { 显示:没有; ｝ < script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < /脚本> < div class = " new_Btn”> SelectPicture < / div > < br > <input id="html_btn" type='file' /><br> .

你也可以在没有jQuery的情况下使用正常的JavaScript实现你的目标。

现在newBtn与html_btn链接，你可以像你想要的那样样式你的新btn:D

这些答案很好，它们都适用于非常具体的用例。也就是说，他们固执己见。

所以，这里有一个答案，它没有任何假设，但无论你如何修改它都是有效的。你可以用css改变设计，添加javascript，可能会显示一个文件名的变化，等等，它仍然会一直工作。

代码:

这里是核心css

.file-input{
  pointer-events: none;
  position: relative;
  overflow: hidden;
}
.file-input > * {
  pointer-events: none;
}
.file-input > input[type="file"]{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: all;
  cursor: pointer;
  height: 100%;
  width: 100%;
}

和核心html:

<div class="file-input">
  <input type="file"/>
</div>

如您所见，我们强制将.file-input元素或其任何子元素上发生的任何指针事件(单击)代理到文件输入。这是因为文件输入的位置是绝对的，并且总是占用容器的宽度/高度。因此，您可以根据自己的需要进行定制。样式包装成一个按钮，使用一些js显示文件名选择，等等，没有什么会打破，只要上述核心代码保持不变。

正如你将在演示中看到的，我已经添加了一个带有文本“Select file”的span和一个带有额外样式的类来设置.file-input div的样式。这应该是任何人想要创建自定义文件上传元素的规范起点。

演示：JSFIDDLE

把上传文件按钮放在你漂亮的按钮或元素上并隐藏它。

非常简单，可以在任何浏览器上工作

<div class="upload-wrap">
    <button type="button" class="nice-button">upload_file</button>
    <input type="file" name="file" class="upload-btn">
</div>

风格

.upload-wrap {
    position: relative;
}

.upload-btn {
    position: absolute;
    left: 0;
    opacity: 0;
}

可见性:隐藏的技巧

我通常会使用可见性:隐藏技巧

这是我设计的按钮

<div id="uploadbutton" class="btn btn-success btn-block">Upload</div>

这是input type=file按钮。注意可见性:隐藏规则

<input type="file" id="upload" style="visibility:hidden;">

这是JavaScript将它们粘合在一起。它的工作原理

<script>
 $('#uploadbutton').click(function(){
    $('input[type=file]').click();
 });
 </script>

样式化文件输入是出了名的困难，因为大多数浏览器不会改变CSS或javascript的外观。

即使输入的大小也不会对以下内容做出反应:

<input type="file" style="width:200px">

相反，你需要使用size属性:

<input type="file" size="60" />

对于任何比这更复杂的样式(例如改变浏览按钮的外观)，你将需要考虑在本机文件输入上覆盖一个有样式的按钮和输入框的狡猾方法。rm在www.quirksmode.org/dom/inputfile.html上提到的那篇文章是我见过的最好的一篇。

更新

虽然直接对<input>标记设置样式很困难，但在<label>标记的帮助下，这很容易实现。请看下面来自@JoshCrozier的回答:https://stackoverflow.com/a/25825731/10128619