为什么这个自定义输入文件在 Edge 中不起作用？

Question

见鬼，我正在构建自定义输入文件，它在 Chrome、FF、Safari 上运行，但在 Edge 上运行，知道吗？

这是我的演示。请在 Chrome 上打开它，然后在 Edge 上打开它以了解问题：

/* /////////////////Custom Upload input///////////// */

.custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
  -webkit-appearance: none;
}

.custom-file-input::-ms-file-upload-button {
  visibility: hidden;
  -ms-appearance: none;
}

.custom-file-input::before {
  content: 'Attach';
  display: inline-block;
  background-color: #c6c6c6;
  border: none;
  width: 50px;
  font-family: Roboto, sans-serif, FontAwesome;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  cursor: pointer;
  color: #ffffff;
  font-size: 12px;
  text-align: center;
}

.custom-file-input:hover::before {
  border-color: black;
}

.custom-file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

<input class="custom-file-input" type="file">

Answer 1

您应该使用 ::-ms-browse 在 Edge 中设置文件输入按钮的样式。然后我们必须用标签包装输入类型文件并在 CSS 中做一些事情。而如果要更改Edge中默认的文件输入框，需要先使用input[type="file"] { opacity: 0;}隐藏，再结合js代码显示文件名。您可以在 Edge 和下面的 Chrome 中查看我的样式输入类型文件示例：

$('input[type=file]').change(function(e) {
    $in = $(this);
    $in.next().html($in.val());  
});

.custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
  -webkit-appearance: none;
}

::-ms-browse  {
  display:none;
}

input[type="file"] {
    display: input-block;
    width: 100%;
    height: 30px;
    opacity: 0;
    cursor:pointer;
    position:absolute;
    left:0;
}

.custom-file-input::before {
  content: 'Attach';
  display: inline-block;
  background-color: #c6c6c6;
  border: none;
  width: 50px;
  font-family: Roboto, sans-serif, FontAwesome;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  cursor: pointer;
  color: #ffffff;
  font-size: 12px;
  text-align: center;
}

.custom-file-input:hover::before {
  border-color: black;
}

.custom-file-input:active::before {
  background: linear-gradient(top, #e3e3e3, #f9f9f9);
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="custom-file-input">
  <input type="file">
  <span class="fileName">Choose file...</span>
</label>

为什么这个自定义输入文件在 Edge 中不起作用？

Why this Custom Input file is not working in Edge?

html

css

microsoft-edge