隐藏文件输入。创建一个新的输入来捕捉点击事件，并将其转发到隐藏的输入:

<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>

<input id="uploadFile" placeholder="Choose File" disabled="disabled" />
<div class="fileUpload btn btn-primary">
    <span>Your name</span>
    <input id="uploadBtn" type="file" class="upload" />
</div>

JS

document.getElementById("uploadBtn").onchange = function () {
    document.getElementById("uploadFile").value = this.value;
 };

更多的http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/

使用Bootstrap FileStyle，它用于样式化表单的文件字段。它是一个名为Twitter Bootstrap的基于jquery的组件库的插件

示例用法:

包括:

<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>

通过JavaScript:

$(":file").filestyle();

通过数据属性:

<input type="file" class="filestyle" data-classButton="btn btn-primary" data-input="false" data-classIcon="icon-plus" data-buttonText="Your label here.">

如果你使用rails，有问题应用它，我想从@Fernando Kosh发布的原始答案中添加一些提示

下载zip文件，复制bootstrap- filstyle .min.js ke文件夹app/assets/javascripts/ 打开你的application.js并在下面添加这一行 //= require bootstrap- filstyle .min 打开你的咖啡，加入这条线 $(“文件”)。filestyle({buttonName: "btn-primary"，buttonBefore: true,buttonText: "你的文本在这里"，icon: false});

我知道，没有人要求它，但如果有人使用bootstrap，它可以通过标签和CSS伪选择器改变。

更改按钮文本:

.custom-file-label::after {
  content: "What's up?";
}

更改字段文本:

<label class="custom-file-label" for="upload">Drop it like it's hot</label>

这是小提琴。

在所有浏览器上都能完美工作，希望它也能为你工作。

HTML: <input type="file" class="custom-file-input">

CSS:

 .custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
  content: 'Select some files';
  display: inline-block;
  background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-weight: 700;
  font-size: 10pt;
}
.custom-file-input:hover::before {
  border-color: black;
}
.custom-file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

更改内容:“选择一些文件”;里面有你想要的文本

如果不与firefox工作，然后使用这个而不是输入:

<label class="custom-file-input" for="Upload" >
</label>

<input id="Upload" type="file" multiple="multiple" name="_photos" accept="image/*" style="visibility: hidden">