How to Style a File Input Field in Firefox

Style css input file Firefox (working on chrome too)

Ok after some hours of trial&error I actually found a real solution to this problem

First I modified the css without the after

.btn-file-upload{
   position: relative;
   top: 0;
   left: 0;
   bottom: 0;
   width: 200px;
   background: white;
   color: black;
   border: 1px solid rgb(0, 0, 126);
   border-radius: 2px;
   text-align: center;
   font-size: 12px;
   line-height: 1.7;
   overflow: visible;
   height: 40px;
}

Second I used a button+input instead of input to be able to set a custom message

<button id="inputdrop" onclick="return document.getElementById('getFile').click();return false;" onkeypress="javascript:return false;"  class="btn-file-upload">Label</button>
<input size='60' style='width: 187px;display:none' type='file' name="theFile" id="getFile" onchange="changeFileName()">
<span id="filename" class="Testo">No file selected</span>

Finally I used some js to be able to drag&drop (the changefilename was already working)

function changeFileName(){
    document.getElementById("filename").innerText = code to get file name in struts;
}


//code here go on the onload
document.getElementById("inputdrop").ondragover = document.getElementById("inputdrop").ondragenter = function(evt) {
    evt.preventDefault();
};

document.getElementById("inputdrop").ondrop = function(evt) {
  document.getElementById("getFile").files = evt.dataTransfer.files;
  changeFileName();
  evt.preventDefault();
};

The only limitation is that this is not working on Internet Explorer and the old Edge... But, at least, this works on both chrome and firefox and the new edge.

manipulate html input type file filename in firefox

You can handle it this way:

1. Make your html input file control hidden and add onchange event handler to change selected file name
2. Add a readonly html textbox control for showing changed file name
3. Add html button control with onclick event handler to trigger file control's click event

DEMO here

HTML:

<input type="text" id="txtFile" readonly="true" />
<input type="button" id="btn" value="Browse..." onclick="browseFile();" />
<input type="file" id="file1" name="file1" onchange="setFileName(this.value);" />

CSS:

#file1 {
    display: none;
}

JS:

function browseFile() {
    document.getElementById('file1').click();
}

function setFileName(fileName) {

    /* Manipulate file name here */
    fileName = fileName.substr(0, fileName.lastIndexOf('.'));
    document.getElementById('txtFile').value = fileName;
}

Hidden/styled file input working in Firefox but not in Chrome

Have a look at this article: How can I remove the "No file chosen" tooltip from a file input in Chrome?

<h5>Artikelliste hochladen:</h5>
<label for="uploadSkus">
   <button class="btn" id="add-article-list"><i class="icon icon-folder-open"></i> Liste auswählen</button>
</label>
<input type="file" name="uploadSkus" id="uploadSkus" class="articles-upload" style="display: none;">

$('#add-article-list').click(function(){
   $("#uploadSkus").trigger('click');
})

Why this css is not working on Firefox?

I don't know if it's what you expect, but there is a cross-browser version of your button which use the <label> trick.
Feel free to tweak the CSS (click on 'view compiled' if you don't use SASS).

http://codepen.io/mbrillaud/pen/LVEgBy

Input type= file works badly in firefox 23.0.1

check out this answer, It will help in customising a button and use it as a file input form your form, and it will look pretty much the same on all browsers

Styling an input type= file button

Styling file inputs are notoriously difficult, as most browsers will not change the appearance from either CSS or javascript.

Even the size of the input will not respond to the likes of:

<input type="file" style="width:200px">

Instead, you will need to use the size attribute:

<input type="file" size="60" />

For any styling more sophisticated than that (e.g. changing the look of the browse button) you will need to look at the tricksy approach of overlaying a styled button and input box on top of the native file input. The article already mentioned by rm at www.quirksmode.org/dom/inputfile.html is the best one I've seen.

UPDATE

Although it's difficult to style an <input> tag directly, this is easily possible with the help of a <label> tag. See answer below from @JoshCrozier: https://stackoverflow.com/a/25825731/10128619

Resize the input type= file browse button in firefox?

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

---

Related Topics