文件的上传按钮，然后在IE

我已经建立了按照以下格式看起来像典型的HTML按钮的上传按钮，而不是浏览器标准的文件上传表单奇文本光标的行为。该方法是设计一个锚点元素并在顶部覆盖一个透明的文件输入元素。文件的上传按钮，然后在IE

这种方法适用于所有浏览器，但IE。在IE中，当用户点击上传按钮时，出现文本光标，就好像用户点击了文本输入框一样。用户可以通过双击按钮来触发文件上传对话框。但这不是我们想要或任何人期望的行为。

我不知道为什么会发生这种情况。我已经成立了一个展示的jsfiddle这里的问题： http://jsfiddle.net/davelee/yfSmc/3/

来源

2012-05-17 Dave Lee

您正在测试什么版本的IE？ – Spudley

这是因为'”'是与浏览器不同的浏览器。当你尝试把东西放在它上面时，你实际上是在点击文本字段 –

这发生在IE8和IE9中。 –

设置文件输入元素的宽度和高度，修复了双方IE8和IE9的问题。

http://jsfiddle.net/davelee/yfSmc/4/

来源

2012-05-18 16:05:42

我已经添加到你的小提琴document.getElementById（'fileUpload'）。焦点（）;并且光标在IE上可见。 – Giedrius

尝试添加CSS

的z-index

你的绝对要素。

最低元件

z-index:1

最高

z-index:2;

，并设置在容器元件上的z索引。

来源

2012-05-17 22:30:18

我刚工作就这一确切的问题。使用IE浏览器，是的，按钮左侧有一个小区域用作文本输入（用于手动输入文件名）。我想到的解决方案是增加输入字段的字体大小。奇怪的是，我知道，但通过增加字体大小，您可以增加其输入字段的“浏览...”按钮部分，因此可以增加可点击区域并推出其上传按钮的文本部分。由于按钮是透明的，无论如何，没有人是明智:)

来源

2013-04-05 20:01:12

谢谢，这就是我所需要的一切，完美！ – Elise

以一个外层div于该输入文件应用过流隐藏和宽度，然后对输入文件应用一些CSS像：字体大小，与容限否定。

<div class="outerWrap"> 
    <input type="file" id="fileUpload"/> 
</div>

和CSS将是：

.outerWrap { 
    width: 200px; 
    height: 50px; 
    overflow: hidden; 
} 
#fileUpload { 
    width: 210px; 
    height: 50px; 
    margin-left: -10px; 
    font-size: 70px; 
}

调整宽度和利润率左根据您的要求。

参考了此链接：http://jsfiddle.net/TrdJ8/ 和尝试在IE-9

来源

2014-06-02 13:57:50 user3519851

满足IE11这个bug，与字体大小修正：0;

来源

2016-04-18 12:24:22 Experimenter

文件的上传按钮，然后在IE

回答

相关问题