-webkit-file-upload-button css implementation for firefox - css

Question

I have css implementation for <input type="file"> which styles the button and this is my code:
::-webkit-file-upload-button {
cursor: pointer;
margin-top: 25px;
display: inline-block;
padding: 6px;
padding-right: 29px;
padding-left: 29px;
transition: all 1s ease;
color: #darkGray;
text-transform: capitalize;
font-size: 15px;
z-index: 1;
position: relative;
border-radius: 25px;
background-color: transparent;
border: 2px solid #red;
}
But this only works on Chrome and I would like to know how would I do it for other browsers?

Answer 1

There's a standard ::file-selector-button pseudo-element now, see https://github.com/w3c/csswg-drafts/issues/5049. Firefox supports it, and future versions of Safari and Chrome will too.

Answer 2

Here is how you can implement custom styling for the "file" input type: https://css-tricks.com/snippets/css/custom-file-input-styling-webkitblink/

Answer 3

Most people tell you to completely do away with the button stuff and use another button to engage the click(); function on the file chooser.
But that may soon be outdated wizardry, as you found out. The equivalent of what you are doing on IE (v10 and above) starts this way:
input[type="file"]::-ms-browse {
background-color: #ffffff00;
margin: 0px;
padding: 0px;
border: 0px;
}
input[type="file"]::-webkit-file-upload-button {
background-color: #ffffff00;
margin: 0px;
padding: 0px;
border: 0px;
}
<input type="file"/>
There are two most important reasons why you should continue to go with your direction
Less hackery, why make it hard if you can do it simpler nowadays?
On Chrome and FF, the file chooser becomes automatically a drop target, that adds huge usability value.
Now I am still researching how I can make the button 3d shading go away, so I can make the button invisible and leave only the simple drop target field.

Answer 4

Styling file inputs is notoriously difficult, as most browsers will not change the appearance from either css or javascript.
You can pass through click events from labels and style the label in whichever way you want.
<label id="add-computer-button" for="fileupload">Add from computer
<input id="fileupload" type="file" multiple="multiple" name="_photos" accept="image/*" style="visibility: hidden">
Here is the demo: https://jsfiddle.net/dinesh_feder/jww69rnf/