How can I style a file input field in Firefox?

Question

I am currently doing the front end for a site with looooads of forms, all styled up and looking pretty in IE, but I\'ve just noticed that in Firefox the file input fields ar

Answer 1

As of Firefox 82, hacks are no longer necessary, per the ::file-selector-button pseudo selector. Current versions of Webkit/Blink browsers (Chrome, Edge, Safari, Opera) don't support it at the moment, but it can be dealt with using the ::-webkit-file-upload-button non-standard pseudo-class.

This way, your HTML can be kept semantic, and no hacks are needed.

Example code from MDN reference above:

HTML

  Upload file
  

CSS

input[type=file]::file-selector-button {
  border: 2px solid #6c5ce7;
  padding: .2em .4em;
  border-radius: .2em;
  background-color: #a29bfe;
  transition: 1s;
}
 
input[type=file]::file-selector-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}