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/

Answer 3

Here is the main idea: http://www.quirksmode.org/dom/inputfile.html

And this might be helpfull for resizing input area

input{font-size: 100px;}

Works fine for me.

Answer 4

Try this one: http://jsfiddle.net/CnHj5/ Works in Firefox and a nice pointer cursor is available.

HTML:

<div class="upload">
    <input class="upload" type="file" />
</div>

CSS:

input.upload {
    -moz-opacity:0;
    filter:alpha(opacity: 0);
    opacity: 0;
    position: absolute;
    right:0;
    font-size: 200px;
    cursor: pointer;
}
div.upload {
    background-color:green;
    width:200px;
    height:100px;
    position: relative;
    display:block; 
    overflow:hidden;}

Answer 5

What websites often do when they need a "customized" file upload widget: have the "real" file upload field hidden. Add a text field that will show the current value of the file upload field and a button that will trigger file selection in the file upload field. Here an example:

<input id="file" type="file" style="display: none;"
       onchange="document.getElementById('text').value = this.value;">

<input id="text" type="text" readonly><input type="button"
       onclick="document.getElementById('file').click();" value="Choose file">

Answer 6

As for me, Zhenya Shevchenko gave one of the best working solutions. Using his method, we can create cross-browser file input button: http://jsfiddle.net/JHcFR/

<div class="fileInput">
    <input type="file" />
</div>

.fileInput {
  overflow: hidden; width: 500px; height: 200px; background: red;
}
.fileInput input {
  font-size: 200px; opacity: 0;
  float: right; filter: alpha(opacity=0); /*IE*/
}