Q:

Why this css is not working on Firefox?

I am trying to change the style of my input type file. The follow CSS is working good on Chrome and Opera but not on Mozilla Firefox.
HTML 
<input type="file" class="custom-file-input" />

CSS
.custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
  content: 'UPLOAD';
  display: inline-block;
  background: -webkit-linear-gradient(top, black, red);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  font-size: 10pt;
 color:#fff;
}
.custom-file-input:hover::before {
  border-color: #fff;
}
.custom-file-input:active::before {
color:#666;
  background: -webkit-linear-gradient(top, bclack, red);
}

http://jsfiddle.net/Rameshpardhi/3agapfw3/
I also changed my style to this:
.custom-file-input::-moz-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
  content: 'UPLOAD';
  display: inline-block;
  background: -moz-linear-gradient(top, black, red);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px;
  outline: none;
  white-space: nowrap;
  -moz-user-select: none;
  cursor: pointer;
  font-size: 10pt;
 color:#fff;
}
.custom-file-input:hover::before {
  border-color: #fff;
}
.custom-file-input:active::before {
color:#666;
  background: -moz-linear-gradient(top, bclack, red);
}

But still its not working. I want to know that why this css is not working on Mozzila?

A:

I don't know if it's what you expect, but there is a cross-browser version of your button which use the <label> trick.
Feel free to tweak the CSS (click on 'view compiled' if you don't use SASS).
http://codepen.io/mbrillaud/pen/LVEgBy

