如何将样式表应用于输入IE8的type = file或如何在IE8中使输入类型的文本字段=文件单击

Question

我正在为IE8（客户端要求）开发一个网站，我在其中提供图像上传功能。使用CSS我将浏览按钮（即输入类型=文件）作为图像（背面图像并将浏览按钮的不透明度设置为0）。

因此，每当用户点击图片时，我想打开文件上传器弹出窗口。我附上了两张照片。一个具有不透明度0，一个不具有不透明度。

在IE8输入类型文件中，左侧有一个文本框，右侧有一个浏览按钮。要打开上传器弹出窗口，我可以单击浏览按钮，但我需要双击我的客户端不想要的文本框。

为了解决这个问题，我在输入类型=文件的顶部添加了一个新按钮，并在其onclick事件中触发了浏览按钮的单击事件。它打开文件上传器，但是当我发布表单图像时没有上传并且失败并显示错误代码4（没有上传文件）。

有没有什么方法可以让我只在IE8中单击一下。在所有其他浏览器中，它只需单击即可完美工作。

有什么想法吗？

谢谢，

Answer 1

查看this小提琴。

不是来自用户的点击将无法正常运行。样式化文件输入字段不会更改按钮的大小超出限制，因此您可以使用缩放属性。

我不确定代码的其余部分是什么样的，但是使用以下CSS作为父代和文件输入是有效的，因此您可以调整值以满足您的需求：

.uploadTrigger {
    height: 500px;
    width: 500px;
    background: url("http://i.stack.imgur.com/PTB47.png") center -20px;
    overflow: hidden;
    position: relative;
}
.uploadTrigger input[type="file"] {
    height: 50px;
    width: 50px;
    opacity: 1;
    cursor: pointer;
    zoom: 10;
    -moz-transform: scale(10) translate(22px, 22px);
    position: absolute;
    top: 0;
    left: 0;
}

如果您尝试将不透明度更改为1，您会注意到该按钮占用整个父级，因此您的用户只需单击一次即可打开文件选择窗口。

上述代码已经过修改，可在IE9，Chrome（28）和Firefox（21）中提供一致的行为。如果您正在开发内部网站，并且您确定只需要IE8支持，则可以删除-moz-transform: scale(10) translate(22px, 22px);

我稍后会在IE8上对它进行测试，如果发现功能失调则更新。