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

How to make a non-displayed input or its label `keyboard tab stoppable`?

本文关键字:选项 键盘 标签 显示 何使未 输入      更新时间:2023-09-26

为了拥有自定义的input file,我将其隐藏为:

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

并为其label:提供了背景

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

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

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

感谢分享

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

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

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