Resize the input type="file" browse button in firefox?

Question

Is there anyway using CSS or JS that you can resize the input type="file" Browse button in firefox?

I know you cannot change the text of the button but all I need to do is make this button wider for firefox. So using a -moz css rule would be perfect.

Answer 1

Styling file input buttons is very limited for security reasons. There are some workarounds, but none are perfect. Check out this post on QuirksMode:

http://www.quirksmode.org/dom/inputfile.html

Answer 2

Edit: As others have noted firefox does not suuport the method below I would refer to the following link http://www.quirksmode.org/dom/inputfile.html

The following is a pretty simple solution. I would advise adding a class to the label though. Basically you style the label instead of the input avoiding cross browser issues and width and height bugs:

<label>
  <input type=file>
</label>

CSS

label input{-moz-opacity:0 ;filter:alpha(opacity: 0);opacity: 0;}
label {background:green;width:200px;height:100px;display:block; /* more styles here */}

http://jsfiddle.net/DVLxp/