有没有办法改变文件上传按钮中的“浏览”？ [复制]答案

【问题标题】：Is there a way to change "browse" in the file upload button? [duplicate]有没有办法改变文件上传按钮中的“浏览”？ [复制]
【发布时间】：2015-05-30 19:30:56
【问题描述】：

我不想完全重新设置文件上传按钮的样式，我只想更改按钮的内容。有没有办法做到这一点？

【问题讨论】：

你会用javascript吗？
quirksmode.org/dom/inputfile.html

标签： css button upload

【解决方案1】：

是的，您可以使用“标签”标签和伪选择器进行自定义。

另外：使用 javascript 显示文件名。

http://jsbin.com/luruqo/5/edit?html,css,js,output

基础是：

/*Hide the current input file*/
input[type="file"] {
  display: none;
}
/*Show the label as custom button*/
input[type="file"]+label[for] {
  background-color: #0af;
  color: #fff;
  padding: 4px;
}
/*Prepare pseudoelement to display file selected (when input change set the title to label with js)*/
input[type="file"]+label[for]:after {
  content: attr(title);
  padding: 4px;
}

这里是完整的 sn-p：

function filechange() {
  var f = (this.files[0] || this.value);
  document.getElementById('labelfor' + this.id).title =
    (f.name || f.fileName || f.replace('C:\\fakepath\\', ''));
}

body {
  font-family: arial;
}
.field input[type=file] {
  display: none;
}
.field input[type=file] + label[for] {
  font-size: 12px;
}
.field input[type=file] + label[for]:before {
  content: attr(label);
  border: solid 1px #0af;
  padding: 3px 10px;
  border-radius: 3px;
  background-color: #def;
  color: #555;
  cursor: pointer;
  box-shadow: none;
  margin-right: 2px;
}
.field input[type=file] + label[for]:hover:before {
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.4);
  color: #dfdfdf;
  background-color: #0af;
}
.field input[type=file] + label[for]:active:before {
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.4);
  color: #fff;
}
.field input[type=file] + label[for]:after {
  padding: 3px 10px;
  content: attr(title);
}

<div class="field">
  <input type="file" id="file1" onchange="filechange.call(this,event);">
  <label id="labelforfile1" for="file1" label="Select a file:"></label>
</div>

【讨论】：