代码之家 › 专栏 › 技术社区 › Domenik Reitzner

输入类型=IE11上的文件

internet-explorer-11 css html jquery javascript

Domenik Reitzner · 技术社区 · 7 年前

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

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

我找到了班级 ::-ms-browse 我可以把按钮设置为 display: none ,但出于某种原因,它仍然可以标记。

复制:

在文本字段中单击
选项卡到输入类型文件(在IE11中只做两个选项卡)

目的是隐藏输入字段,并将标签显示为按钮而不是输入字段。要做到这一点,一个按钮需要切换两次是很难的。

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>

1 回复 | 直到 6 年前

Alexandre Elshobokshy 7 年前

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/

推荐文章

Kathryn Crawford · ul元素上的伪元素在IE11中不起作用

7 年前

infodev · IE 11使用角度5的兼容性错误

7 年前

godblessstrawberry · 检测角度5中的IE11并抑制“属性不存在”警告

7 年前

Dinesh N.K · Internet Explorer 11-无法选中angular 5中的“输入类型”复选框

7 年前

Tomer · 简单css网格不适用于IE11

7 年前

Kim · 父框未仅在IE中包装

7 年前

curtybear · 在IE11上居中SVG文本,文本定位:中间和对齐基线:中间/中间

7 年前

Petrolea · SVG-圆圈标记在所有浏览器中的大小都不相同(IE11)

7 年前

CSharpDev · 使用javascript方法窗口打开编码URL时出错。使用Internet explorer打开()。

7 年前

Luke Hammer · 如果浏览器不支持ES6模板文本,则创建错误消息

7 年前