我能想到的唯一方法是在它被渲染后用javascript找到按钮，并分配一个样式给它

你也可以看看这个记录

当点击有样式的<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");
});

只有CSS

使用这个非常简单和容易

.choose: -webkit-file-upload-button { 颜色:白色; 显示:inline-block; 背景:# 1 cb6e0; 边界:没有; 填充:7px 15px; 粗细:700; border - radius: 3 px; 空白:nowrap;} 光标:指针; 字体大小:10 pt; ｝ <label>附加你的屏幕短片</label> <input type="file" multiple class=" select ">

这周我还需要自定义按钮，并在旁边显示所选的文件名，所以在阅读了上面的一些答案后(谢谢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。

<input type="file" name="media" style="display-none" onchange="document.media.submit()">

我通常会使用简单的javascript来定制文件输入标记。一个隐藏的输入字段，点击按钮，javascript调用隐藏字段，简单的解决方案与任何css或一堆jquery。

<button id="file" onclick="$('#file').click()">Upload File</button>

我能够做到这与纯CSS使用下面的代码。我已经使用了bootstrap和font-awesome。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" /> <label class="btn btn-default btn-sm center-block btn-file"> <i class="fa fa-upload fa-2x" aria-hidden="true"></i> . <input type="file" style="display: none;"> < / >标签