Question

我使用包装在label标签内的复选框，并使用另一个标签显示自定义图标和复选框的悬停效果。使用鼠标工作正常，我可以使用鼠标选中复选框。

但现在我必须使用tab键浏览这些复选框，并使用空格键使它们可选。我尝试将tabindex添加到输入字段和标签标签，但它们似乎都没有工作。

这是我们正在使用的代码段

<label for="checkbox1"> <input class="css-checkbox" type="checkbox" id="checkbox1" tabindex="1"/> <label class="check-label" for="checkbox1"> Health Check </label> </label>

如何使用Tab键在这些复选框上导航并使用空格键进行选择？

Answer 1

你可能正在寻找这样的解决方案：

<label for="checkbox1">
    <input class="css-checkbox" type="checkbox" id="checkbox1" tabindex="0"/>
    <span>Health Check</span>
</label>
<br />
<label for="checkbox2">
    <input class="css-checkbox" type="checkbox" id="checkbox2" tabindex="0"/>
    <span>Health Check #2</span>
</label>
<br />
<label for="checkbox3">
    <input class="css-checkbox" type="checkbox" id="checkbox3" tabindex="0"/>
    <span>Health Check #3</span>
</label>

关键点是只使用一个包裹label然后tabindex=0。

演示：http://cssdeck.com/labs/oeyqxhhz

使用Tab键在复选框上导航并使用空格键选择它们

1 个答案: