时间戳

首页 > 解决方案 > 为什么这个自定义输入文件在 Edge 中不起作用？

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

问题描述

见鬼，我正在构建一个自定义输入文件，它适用于 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">

标签： htmlcssmicrosoft-edge

解决方案

您应该使用::-ms-browseEdge 中的文件输入按钮样式。然后我们必须用标签包装输入类型文件并在 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>

推荐阅读