样式化文件输入是出了名的困难，因为大多数浏览器不会改变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

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

:: file-selector-button

https://developer.mozilla.org/en-US/docs/Web/CSS/::file-selector-button

这是一个新的选择器，可用于设置文件选择器按钮的样式。

它在最新的浏览器版本上得到了全面支持。

输入(type =文件)::file-selector-button { 边框:2px实体#6c5ce7; 填充:.2em .4em; border - radius: .2em; background - color: # a29bfe; 过渡:1; ｝ 输入(type =文件)::file-selector-button:{徘徊 background - color: # 81 ecec; 边框:2px实体#00cec9; ｝ < >形式 <label for="fileUpload">上传文件</label> <input type="file" id="fileUpload"> > < /形式

下面是另一个演示不同样式的代码片段:

.input_container { 边框:1px solid #e5e5e5; ｝ 输入(type =文件)::file-selector-button { background - color: # fff; 颜色:# 000; 边界:0 px; 右边框:1px solid #e5e5e5; 填充:10px 15px; margin-right: 20 px; 过渡:0; ｝ 输入(type =文件)::file-selector-button:{徘徊 background - color: # eee; 边界:0 px; 右边框:1px solid #e5e5e5; ｝ < >形式 < div class = " input_container”> <input type="file" id="fileUpload"> < / div > > < /形式

我觉得这个答案是必要的，因为这里的大多数答案都过时了。

转换文件名的多个文件解决方案

自举例子

HTML:

<div>
  <label class="btn btn-primary search-file-btn">
    <input name="file1" type="file" style="display:None;"> <span>Choose file</span>
  </label>
  <span>No file selected</span>
</div>

<div>
  <label class="btn btn-primary search-file-btn">
    <input name="file2" type="file" style="display:None;"> <span>Choose file</span>
  </label>
  <span>No file selected</span>
</div>

1. jQuery JS:

$().ready(function($){
    $('.search-file-btn').children("input").bind('change', function() {
    var fileName = '';
    fileName = $(this).val().split("\\").slice(-1)[0];
    $(this).parent().next("span").html(fileName);
  })
});

2. JS没有jQuery

Array.prototype.forEach.call(document.getElementsByTagName('input'), function(item) {
  item.addEventListener("change", function() {
    var fileName = '';
    fileName = this.value.split("\\").slice(-1)[0];
    this.parentNode.nextElementSibling.innerHTML = fileName;
  });
});

我能够做到这与纯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;"> < / >标签

这种方法为您提供了完全的灵活性!ES6 / VanillaJS!

html:

<input type="file" style="display:none;"></input>
<button>Upload file</button>

javascript:

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('input[type="file"]').click();
});

这隐藏了输入文件按钮，但实际上是从另一个普通按钮点击它，显然您可以像设置其他按钮一样设置它的样式。这是除了无用的dom节点之外没有任何缺点的唯一解决方案。多亏了display:none;，输入按钮在DOM中不保留任何可见空间。

(我已经不知道该支持谁了。但我是从Stackoverflow网站的某个地方得到这个想法的。)