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>

Answer 1

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

Question

1 answers

solution1
0 2017-01-24 14:30:25

HTML

CSS

JS

CSS style works on chrome but not on Firefox

Question

1 answers

solution1 0 2017-01-24 14:30:25

HTML

CSS

JS

solution1
0 2017-01-24 14:30:25