一个快速粗暴的方法是将标签设置为按钮，并将位置设置为绝对，这样它就会浮动在原始按钮上，你仍然可以看到文件名。不过，我正在考虑移动解决方案。

 <label>
    <input type="file" />
 </label>

您可以将input type="file"包装在输入的标签中。样式标签，无论你喜欢和隐藏输入display: none;

当<input type="file">被创建时，所有渲染引擎都会自动生成一个按钮。从历史上看，这个按钮是完全不可样式的。然而，Trident和WebKit通过伪元素添加了钩子。

三叉戟

从IE10开始，文件输入按钮可以使用::-ms-browse伪元素来设置样式。基本上，应用于普通按钮的任何CSS规则都可以应用于伪元素。例如:

:: -ms-browse { 背景:黑色; 颜色:红色; 填充:1 em; ｝ < input type = " file " >

Windows 8操作系统的IE10界面显示如下:

WebKit

WebKit为其文件输入按钮提供了一个带有::-webkit-file-upload-button伪元素的钩子。同样，几乎任何CSS规则都可以应用，因此Trident的例子也可以在这里工作:

:: -webkit-file-upload-button { 背景:黑色; 颜色:红色; 填充:1 em; ｝ < input type = " file " >

在OS X操作系统下，Chrome 26界面显示如下:

CSS在这里可以做很多事情…耍点小花招……

<div id='wrapper'>
    <input type='file' id='browse'>
</div>
<style>
    #wrapper {
            width: 93px; /*play with this value */
            height: 28px; /*play with this value */
            background: url('browseBtn.png') 0 0 no-repeat;
            border:none;
            overflow:hidden;
    }

    #browse{
            margin-left:-145px; /*play with this value */
            opacity:0; /* set to .5 or something so you can better position it as an overlay then back to zero again after you're done */
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    }
</style>

::参考::http://site-o-matic.net/?viewpost=19

修道院

$ (' .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