这周我还需要自定义按钮，并在旁边显示所选的文件名，所以在阅读了上面的一些答案后(谢谢BTW)，我想出了以下实现:

HTML:

<div class="browse">
<label id="uploadBtn" class="custom-file-upload">Choose file
<input type="file" name="fileInput" id="fileInput" accept=".yaml" ngf-select ngf-change="onFileSelect($files)" />
</label>
<span>{{fileName}}</span>
</div>

CSS

   input[type='file'] {
    color: #a1bbd5;
    display: none;

}

.custom-file-upload {
    border: 1px solid #a1bbd5;
    display: inline-block;
    padding: 2px 8px;
    cursor: pointer;
}

label{
    color: #a1bbd5;
    border-radius: 3px;
}

Javascript(角)

app.controller('MainCtrl', function($scope) {

        $scope.fileName = 'No file chosen';

          $scope.onFileSelect = function ($files) {
          $scope.selectedFile = $files;
          $scope.fileName = $files[0].name;
    };
});

基本上我正在使用ng-file-upload lib, angular方面，我将文件名绑定到我的$作用域，并给它的初始值为'No file selected '，我还将onFileSelect()函数绑定到我的作用域，因此当一个文件被选中时，我使用ng-upload API获取文件名并将其分配给$scope.filename。

这是简单的jquery。对Ryan的建议稍加修改后给出一个代码示例。

基本的html:

<div id="image_icon"></div>
<div id="filename"></div>
<input id="the_real_file_input" name="foobar" type="file">

当你准备好时，一定要在输入上设置样式:不透明度:0 你不能设置display: none，因为它需要是可点击的。但是你可以把它放在“new”按钮下面，或者如果你喜欢的话，把它塞进z-index的其他东西下面。

设置一些jquery，当你点击图像时，点击真正的输入。

$('#image_icon').click(function() {
    $('#the_real_file_input').click();
});

现在你的按钮开始工作了。更改时只需剪切并粘贴值。

$('input[type=file]').bind('change', function() {
    var str = "";
    str = $(this).val();
    $("#filename").text(str);
}).change();

发长音!您可能需要将val()解析为更有意义的内容，但您应该已经全部设置好了。

当<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界面显示如下:

这里我们使用span来触发类型文件的输入，并且我们简单地定制了span，所以我们可以使用这种方式添加任何样式。

注意，我们使用带有可见性:hidden选项的input标记，并在span中触发它。

.attachFileSpan { 颜色:# 2 b6dad; 光标:指针; ｝ .attachFileSpan:{徘徊 文字修饰:下划线; ｝ <h3>自定义输入文件类型</h3> <input id="myInput" type="file" style="visibility:hidden"/> <span title="attach file" class="attachFileSpan" onclick="document.getElementById('myInput').click()" > 附加文件 < / span >

参考

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

所以，这里有一个答案，它没有任何假设，但无论你如何修改它都是有效的。你可以用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>时，只需使用trigger()函数模拟点击<input>。我在<div>中创建了自己的按钮，然后在点击我的<div>时触发了输入上的单击。这允许你创建你想要的按钮，因为它是一个<div>，模拟点击你的文件<input>。然后在<input>上使用display: none。

// div styled as my load file button
<div id="simClick">Load from backup</div>

<input type="file" id="readFile" />

// Click function for input
$("#readFile").click(function() {
    readFile();
});

// Simulate click on the input when clicking div
$("#simClick").click(function() {
    $("#readFile").trigger("click");
});