有没有办法在文件上传按钮中更改“浏览”？

Question

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

Answer 1

是的，您可以使用＆＃34;标签＆＃34;进行自定义标签和伪选择器。

Plus：使用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;
}

这里有完整的代码段

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;