Is there a way to change "browse" in the file upload button?

Question

I'm not wanting to completely restyle the file upload button, I'd just like to change what the button says. Is there a way to do this?

Answer 1

Yes, you can customize using "label" tag and pseudo selector.

Plus: use javascript to display the filename.

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

The base is:

/*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;
}

Here the complete snippet:

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>