Ramesh Pardhi Ramesh Pardhi - 6 months ago 19
CSS Question

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?

Answer

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