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

以下代码在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>

使用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)
});

这是demo1或demo2

HTML

CSS

JS

相关内容

最新更新

热门标签：