强制制表符在隐藏元素上停止？可能？

Question

该网站在这里

我选择使用单选按钮的标签作为它们的自定义按钮。这意味着无线电输入本身不显示：因此，浏览器不会在制表符标签处停下来，但我希望它们。

我试图强迫他们使用tabindex，但是没有雪茄。

我想出了只在标签前面放一个无意义的复选框，并将其设置为width：1px;的方法。和高度1像素；这似乎仅适用于Chrome和Safari。

那么，您是否还有其他想法可以迫使制表符在这些位置停止而不显示任何元素？

编辑：

以防万一有人通过这种方式，这就是我能够使用JQuery将小的复选框插入chrome和safari的方式：

if ($.browser.safari) {
    $("label[for='Unlimited']").parent().after('<input style="height:1px; width:1px;" type="checkbox">');
    $("label[for='cash']").parent().after('<input style="height:1px; width:1px;" type="checkbox">');
    $("label[for='Length12']").parent().after('<input style="height:1px; width:1px;" type="checkbox">');
}

注意：$ .browser.webkit并没有成为现实...所以我不得不使用野生动物园

Answer 1

在我的情况下启用选项卡选择/箭头导航的可行解决方案是将不透明度设置为零而不是“显示：无”

.styled-selection input {
    opacity: 0;         // hide it visually
    z-index: -1;        // avoid unintended clicks
    position: absolute; // don't affect other elements positioning
}

Answer 2

保持无线电输入隐藏，但设置在到达无线电输入的元素tabindex="0"上。<label>

（选项卡索引为 0 时，该元素将与具有未指定选项卡索引但仍可选项卡的其他元素一起保持在选项卡流中。）