选择文件输入的 Firefox 呈现问题

Question

我们有一个“选择文件”按钮，可以很好地与 Chrome 和 Edge 配合使用。但是 Firefox 无法从 data-content 属性中提取按钮标题。

.choose-file { width: 25%; margin-right: 8px; align-items: center; }
.choose-file > button { width: 100%; }

span.cabinet {
        display: block;
        height: 30px;
        position: fixed;
        overflow: hidden;
        top: 3px;
        width: 88px;
}

span.cabinet input.file {
            filter: alpha(opacity = 0);
            height: 100%;
            opacity: 0;
            width: auto;
}
.custom-file-input::-webkit-file-upload-button {
    visibility: hidden;
}

.custom-file-input::before {
    content: attr(data-content);
    margin-top: 5px;
    margin-bottom:5px;
    padding-bottom: 1px;
    display: inline-block;
    padding: 5px 8px;
    outline: none;
    color: #606060;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 0.8rem;
    background-color: #EFF0F4;
    border-radius: 3px;
    border: 1px solid #ABB8C5;
}

.custom-file-input:hover::before {
    content: attr(data-content);
    margin-top: 5px;
    padding-bottom: 1px;
    display: inline-block;
    padding: 5px 8px;
    outline: none;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 0.8rem;
    background-color: #606060 !important;
    color: #EFF0F4;
    border-radius: 3px;
    border: 1px solid #EFF0F4;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="choose-file">
<span id="span" class="cabinet">
<input tabindex="-1" type="file" id="UploadButton" name="Upload" class="custom-file-input" data-content="Choose File" accept=".xlsx, .xls">
<br>
</span>
 </div>

Answer 1

Mozilla 声明 FireFox 不支持 -webkit-file-upload-button.

他们提供用标签包装输入并使用更经典的 HTML 方法。

  label {
    margin-top: 5px;
    margin-bottom:5px;
    padding-bottom: 1px;
    display: inline-block;
    padding: 5px 8px;
    outline: none;
    color: #606060;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 0.8rem;
    background-color: #EFF0F4;
    border-radius: 3px;
    border: 1px solid #ABB8C5;
  }
  label:hover {
    background-color: #606060;
    color: #EFF0F4;
    border-color: #EFF0F4;
  }
  label input[type=file] { display: none }

<label>
  Choose file
  <input type=file>
</label>

选择文件输入的 Firefox 呈现问题

Firefox rendering issue for Choose File input

html

javascript

css

firefox