以下代码在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>
答案 0 :(得分：0)
使用span元素指向input file元素，并隐藏输入本身。
然后，使用一些JS，将名称（或其他信息）放在布局所需的位置。
<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>
#proof_documents {
display:none;
}
.myButton {
// your stiles!
}
$('#proof_documents').on('change', function(){
$('.name-file').html('')
$('.name-file').html(document.getElementById("proof_documents").files[0].name)
});