如果有人仍然关心如何在没有JavaScript的情况下做到这一点，让我完成Josh的回答:

如何显示文件名的文本:

最简单的方法是将这两个元素设置到一个位置:相对，给标签一个更高的z-index，并给输入文件负边距，直到标签文本在你想要的位置。不要在输入时使用display:none !

例子:

input[type="file"] {
  position:relative;
  z-index:1;
  margin-left:-90px;
}

.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  position:relative;
  z-index:2;
  background:white;

}

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

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

你也可以看看这个记录

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

自举例子

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;
  });
});

最好的方法是使用伪元素: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;
}

我发现插件解决方案太笨重了，所以我制作了自己的jQuery插件Drolex FileStyle。

This plug-in allows you to style file input fields however you want. Actually, you style div elements to look like a tricked out file input, and the actual file input is automatically overlaid with 0% opacity. No additional HTML is required. Just include the css and js files in the page you want Drolex FileStyle and that's it! Edit the css file to your liking. Don't forget the jQuery library if your page doesn't already have it. If the client does not run JavaScript, then the file input will not be modified by js or css.

测试工作在Chrome 24, Firefox 18, Internet Explorer 9。 预计可以在之前的版本中使用。

下载:http://web.drolex.net/Drolex-FileStyle.zip。