CSS style works on chrome but not on Firefox

Question

The following code runs successfully on chrome browser but not work on Mozilla firefox.

How can I make the below code work on all browsers

.customfile {
    width: 371px;
    height: 29px;
    margin-top: 10px;
    outline: none;
    color: #666666;
    background-color: #dbdbdb;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    text-align: center;
}
input[type="file"].customfile::-webkit-file-upload-button {
    float: right;
    position: relative;
    top: 0px;
    right: -99px;
    background-color: #8bc243;
    height: 29px;
    width: 100px;
    border: 0px;
    color: #ffffff;
    text-align: center;
    outline: none;
}

<html>
<body>
<div class="form-block-small block-right">
 <span class="gray14">Proof documents</span><br>
 <input type="file" name="proof_documents" id="proof_documents" class="customfile valid">
</div>
</body>
</html>

Have you seen http://stackoverflow.com/questions/16080644/customize-the-file-button-for-image-upload/16080910#16080910 ? — Chris Lear, Dec 08 '15 at 14:10
Yes, but the answer of it can't display the chose file name @ChrisLear — Khaled Elkhamisy, Dec 08 '15 at 14:14
`-webkit-file-upload-button` is a webkit only feature. Firefox is made by Mozilla and thus doesn't have it. Have you tried [this alternate method](http://stackoverflow.com/questions/21842274/cross-browser-custom-styling-for-file-upload-button)? — AVAVT, Dec 08 '15 at 14:22
I'm not sure even the alternative method will help. This is a much-asked and little-answered problem. The best reference is probably http://stackoverflow.com/questions/31413109/how-to-style-html-file-upload-button-with-pure-css-in-firefox — Chris Lear, Dec 08 '15 at 14:27
My preferred method of setting up file inputs is with `` elements. Hide the file input itself, and have a label that points to it, styled however you may please. — Katana314, Dec 08 '15 at 16:03

Giacomo Paita · Answer 1 · 2017-01-24T15:27:16.190

Use a span element point to the input file element, and hide the input itself.

Then, with some JS, put the name (or other info) where your layout needs.

HTML

    <label class="myButton" for="proof_documents">Carica</label> <br>
    <input type="file" name="proof_documents" id="proof_documents" class="customfile valid">
    <span class="name-file"></span>

CSS

  #proof_documents {
    display:none;
  }

 .myButton {
   // your stiles!
 }

JS

$('#proof_documents').on('change', function(){

  $('.name-file').html('')
  $('.name-file').html(document.getElementById("proof_documents").files[0].name)

});

Here is the demo1, or demo2

CSS style works on chrome but not on Firefox

1 Answers1

HTML

CSS

JS