INPUT 类型=IE11 上的文件答案

【问题标题】：INPUT type=file on IE11INPUT 类型=IE11 上的文件
【发布时间】：2018-11-28 03:26:44
【问题描述】：

我在 IE11 上输入文件类型时遇到问题。

IE11 将输入字段显示为两个可选项卡的伪元素（文本/按钮）。

我找到了 ::-ms-browse 类，它可以让我将按钮设置为 display: none，但由于某种原因，它仍然是可选项卡的。

复制：

点击文本字段
Tab 进入输入类型文件（在 IE11 中只会做两个选项卡）

目标是隐藏输入字段并将标签显示为按钮而不是输入字段。为此，一个按钮必须按两次 Tab 键会很尴尬。

input[type="file"]::-ms-browse {
  display: none;
  visibility: hidden;
}

input[type="file"]+label.fake-file-upload {
  background: $white;
  color: #999;
  font-family: "Glober", sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  padding: 0.75rem 4rem;
  letter-spacing: 0.25rem;
  cursor: pointer;
  display: table;
}

input[type="file"]:focus+label.fake-file-upload {
  outline: 2px dotted #444;
  outline-offset: 5px;
  border-spacing: 5px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

<input type="text" ><br><br>
<input type="file" id="upload-photo" name="photo" required>
<label for="upload-photo" class="fake-file-upload">DURCHSUCHEN</label>

【问题讨论】：

Firefox、Chrome 和 Opera 只做一个标签页
所以你想阻止用户使用标签进入输入文件和标签？你到底想要什么？
感谢@IslamElshobokshy 的问题，我更新了描述:)
正如您在示例中看到的那样，它是隐藏的，但它仍然是按钮的标签。
由于可访问性，它需要可选项卡。谢谢

标签： javascript jquery html css internet-explorer-11

【解决方案1】：

玩了一会儿我可能会有一个想法：

如果您希望能够防止用户在输入中切换，使标签可切换和可点击，我会这样做：

input[type="file"]::-ms-browse {
  display: none;
  visibility: hidden;
}

input[type="file"]+label.fake-file-upload {
  background: $white;
  color: #999;
  font-family: "Glober", sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  padding: 0.75rem 4rem;
  letter-spacing: 0.25rem;
  cursor: pointer;
  display: table;
}

input[type="file"]:focus+label.fake-file-upload {
  outline: 2px dotted #444;
  outline-offset: 5px;
  border-spacing: 5px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

<input type="text" ><br><br>
<input type="file" id="upload-photo" name="photo" required tabindex="-1">
<label for="upload-photo" class="fake-file-upload" tabindex="0">DURCHSUCHEN</label>

$('.fake-file-upload').keypress(function (e) {
 var key = e.which;
 if(key == 13)  // the enter key code
  {
    $('.fake-file-upload').trigger("click");
    return false;  
  }
});

测试用例：https://jsfiddle.net/keystfjw/29/

【讨论】：