CSS 样式适用于 chrome，但不适用于 Firefox答案

【问题标题】：CSS style works on chrome but not on FirefoxCSS 样式适用于 chrome，但不适用于 Firefox
【发布时间】：2017-01-24 23:27:16
【问题描述】：

以下代码在 chrome 浏览器上运行成功，但在 Mozilla firefox 上无法运行。

如何让下面的代码在所有浏览器上运行

.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>

【问题讨论】：

你见过stackoverflow.com/questions/16080644/…吗？
是的，但它的答案无法显示选择的文件名@ChrisLear
-webkit-file-upload-button 是 Webkit 独有的功能。 Firefox 由 Mozilla 制造，因此没有它。你试过this alternate method吗？
我不确定替代方法是否会有所帮助。这是一个被问得很多而回答却很少的问题。最好的参考可能是stackoverflow.com/questions/31413109/…
我首选的设置文件输入的方法是使用<label> 元素。隐藏文件输入本身，并有一个指向它的标签，可以随意设置样式。

标签： html css google-chrome firefox

【解决方案1】：

使用span 元素指向input file 元素，并隐藏输入本身。

然后，使用一些 JS，将名称（或其他信息）放在您的布局需要的位置。

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)

});

这里是the demo1，或demo2

【讨论】：