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

Firefox can be hacked using the HTML input size attribute: size="40" while using a css width to control the full width of the field + button in layout

Answer 2

Many of the answers above are quite old. In 2013 a much simpler solution exists: nearly all current browsers...

• Chrome
• IE
• Safari
• Firefox with a few-line fix

pass through click events from labels. Try it here: http://jsfiddle.net/rvCBX/7/

• Style the <label> however you you would like your file upload to be.
• Set for="someid" attribute on the label
• Create a <input id="someid"> element, that's hidden.

Clicking the label will passthrough the event to the fileupload in Chrome, IE, and Safari.

Firefox requires a very small workaround, which is detailed in this answer.

Answer 3

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

<form>
  <label for="fileUpload">Upload file</label>
  <input type="file" id="fileUpload">
</form>

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;
}

Answer 4

Use cheat code ( # ) infront of the attribute of css class say:

form.CollateralForm input,
form.CollateralForm textarea
{
    width:300px;  //for firefox
    #width:200px; //for IE7
    _width:100px; //for IE6
    font-size:1em;
    border: solid 1px #979797;
    font-family: Verdana, Helvetica, Sans-Serif;
}

Answer 5

Let's say you have your input:

<input style="display:none" id="js-choose-file" type="file">

Create a fake button using jQuery.

<a id="js-choose-computer" href="javascript:void(0);">From Computer</a>

Style the above button any way you like. Then:

$("#js-choose-computer").on("click", function() {
  $("#js-choose-file").click();
  return false;
});

Answer 6

Customformsjs pluggin address this issue on its File module class.
http://customformsjs.com/doc/File.html

http://customformsjs.com/doc/File.js.html

Basicaly it make possible to kind to style File input fields with some restrictions. It work by wrapping it in a container and making it transparent so your click on it. The demo page shows it in action