如何使一个不显示的输入或其标签`键盘选项卡可停止？

Question

要拥有自定义的input file，我已将其隐藏起来：

 input[type="file"]{display:none;}

并为其label：

添加了背景信息

 label.uploadfilelabel {background-image:url(../image.jpg);}

这种方法工作正常，但它引入了另一个问题：键盘选项卡不会停在此按钮及其标签上。我尝试使用tabindex="0"但没有结果。有没有办法在这个隐藏按钮上停止键盘标签？

当然，我更喜欢纯CSS解决方案，但javascript解决方案（不含jQuery）也是可以接受的。

感谢分享

更新：这是fiddle of the problem。我测试过，它适用于IE和FireFox但不适用于Chrome

Answer 1

你应该试试这个。它有效，但请记住它是html5。

<input type="file" tabindex="-1">