如何使未显示的输入或其标签“键盘选项卡可停止”

Question

为了拥有自定义的input file，我将其隐藏为：

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

并为其label:提供了背景

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

这种方法效果很好，但它引入了另一个问题：键盘选项卡不会停止在这个按钮及其标签上。我尝试使用tabindex="0"，但没有结果。有什么方法可以停止这个隐藏按钮上的键盘选项卡吗？

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

感谢分享

更新：这是一个棘手的问题。我测试过，它在IE和FireFox中有效，但在Chrome 中无效

Answer 1

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

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