Javascript 输入类型="；文件"；样式帮助

我有一个

不透明的文件输入字段：0和<代码>过滤器：alpha（不透明度：0）位于我用作按钮选择文件的大div的顶部，所选文件名显示在按钮下方

所有这些都可以正常工作，但是当您在IE中设置file元素的
width
属性（在本例中，是它下面的DIV的宽度）时，该宽度的一部分是文件输入的文本区域。当然，IE有自己的功能，与其他浏览器不同，必须双击元素的文本区域才能打开浏览对话框。Firefox和Safari只需单击元素的文本部分即可操作。由于IE允许您调用元素上的
.click（）
事件，我认为我有一个解决方法

我试过这个：

<input type="file" onclick="this.click();" />

<input type="file" onmouseup="this.click();" />



什么都没做，所以我试了这个：

<input type="file" onclick="this.click();" />

<input type="file" onmouseup="this.click();" />



这样做有效，只需单击元素的文本区域即可显示浏览对话框。但是，由于某种原因，在提交表单时，如果选择了一个文件，表单将不会提交，不会发生任何事情。如果未选择任何文件，则将提交表单的其余部分

现在我回到原点，我的选择文件按钮的左半部分必须双击才能选择文件，右半部分可以单击。我想不出任何其他方法让IE对元素的一次点击做出反应。我尝试使用
onfocus
事件触发
。元素上的click（）
也可以，但由于此上载对话框将是页面上唯一的内容，并且
是呈现的第一个输入元素，因此页面加载时会触发click事件

因此，我尝试附加到body的
onload
事件，并将焦点设置为其他内容，但为时已晚，焦点已经指定给文件输入，浏览对话框已经打开。我知道我正在接近onfocus，是否有一种方法可以在页面加载时防止元素具有焦点？或者有没有其他任何人都能想到的方法

谢谢

[更新]

我再次尝试使用onfocus，不幸的是，我错了，提交表单时focus再次被调用到file元素，停止提交并再次打开浏览对话框
我最喜欢的格式化html输入的解决方案：
我认为所有这些问题都是由
输入的安全措施引起的[类型=文件]
。这不是真的，是的，它们使文件输入元素无法通过脚本进行大量交互以获得安全措施。这就是为什么您将不透明度设置为0，并将文件输入放置在样式区域上。我不认为是其安全措施导致了此问题。这与当e表单已提交。如果我只需在页面的其他位置创建另一个按钮，并分配其单击事件以触发对文件元素的单击，则一切正常。不幸的是，ui是由客户端创建的。我可以将文件输入样式设置为该网站上的图片。这是一个不同的问题。不过，我通过使用有条件的IE css使文件输入的按钮部分尽可能大。因为你的回答是唯一我会接受的。