Why this css is not working on Firefox?

Question

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?

try to put -moz- in front of property like this : -moz-linear-gradient(top, bclack, red); — icode03, Apr 28 '15 at 13:13
possible duplicate of [How can I style a file input field in Firefox?](http://stackoverflow.com/questions/352467/how-can-i-style-a-file-input-field-in-firefox) — Flynn1179, Apr 28 '15 at 13:16
There isn't a firefox verion of `-webkit-file-upload-button`: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Mozilla_Extensions — Pete, Apr 28 '15 at 13:30
I dont know if its duplicate or not, but I am not asking for how to style input type file, what I am asking is why this css is not working on mozilla? — Ramesh Pardhi, Apr 28 '15 at 13:33

Ciprian · Answer 1 · 2015-04-28T13:20:42.970

0

Notice the -webkit- declarations? That's just for Chrome and Opera. Either double them and replace them with -moz- or remove them altogether.

Try to run autoprefixer on your code to get the correct code.

Note: The recommended structure for you would be to have a label around the input field and style that.

edited Apr 28 '15 at 13:20

answered Apr 28 '15 at 13:12

Ciprian

872
1
10
30

score 0 · Accepted Answer · answered Apr 28 '15 at 13:27

0

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

answered Apr 28 '15 at 13:27

Mehdi Brillaud

1,846
2
13
22

Is there any way to do this with css only? – Ramesh Pardhi Apr 28 '15 at 13:56
You need JS to get the value of the input since the input is hidden. The button still work without it but you won't see which file you have selected anymore. – Mehdi Brillaud Apr 28 '15 at 13:59

Aaron Gustafson · Answer 3 · 2016-06-09T17:03:49.997

0

Mozilla has no equivalent for the vendor prefixed ::-webkit-form-upload-button. It’s proprietary (i.e. non-standard) and is only supported in Webkit & Chromium-based browsers.

You can get relative parity in IE: https://www.tjvantoll.com/2013/04/15/list-of-pseudo-elements-to-style-form-controls/#input_file

edited Jun 09 '16 at 17:03

answered Jun 09 '16 at 14:53

Aaron Gustafson

602
6
11

Why this css is not working on Firefox?

3 Answers3