我正在使用“卡片”样式的复选框 - 有三个不可见的复选框 (opacity: 0
),相应的标签显示为带背景的框。
单击标签时,复选框被选中,我将其标签更改为蓝色背景。这一切都很好,除了我发现当标签本身通过点击空格键处于焦点时我无法浏览标签并选择它们相应的复选框。
复选框本身可以用空格键切换和选择,但当标签聚焦于……它位于标签之间时则不行。
注意:我在标签上设置了一个 tabindex="0"
,这样它们就可以被聚焦和突出显示。
没有 JavaScript 有什么办法可以做到这一点吗?我正在为 Angular 应用程序开发 UI,但我没有太多的 Angular 知识。
我知道不同浏览器的制表符和输入选择也存在不一致(我正在 Chrome 中解决这个问题),所以我希望也能考虑到这一点。谢谢。
/* Unchecked labels are red */
label {
display: inline-block;
width: 100px;
height: 50px;
background-color: tomato;
}
/* Invisible checkboxes */
input[type="checkbox"] {
opacity: 0;
}
/* If checkbox is checked, blue background */
input[type="checkbox"]:checked + label {
background-color: blue;
}
<input type="checkbox" id="1">
<label for="1" tabindex="0"></label>
<input type="checkbox" id="2">
<label for="2" tabindex="0"></label>
<input type="checkbox" id="3">
<label for="3" tabindex="0"></label>
最佳答案
@dacre-denny 的一个非常有创意的答案,它回答了原始问题,但是原始代码和答案代码仍然存在一些严重的可访问性问题,并且由于 accessibility
标签被指定为这个问题,我想对此发表评论,即使它不是 OP 的一部分。
已接受的答案建议将
spec for tabindex有两个警告:
Using a positive value for tabindex to specify the element’s position in the sequential focus navigation order interacts with the order of all focusable elements. It is error-prone, and therefore not recommended
其次,
authors should only make elements focusable if they act as interactive controls or widgets
我认为,如果您从
(我在“代码片段”上调出了浏览器的代码检查器,并从
关于html - 如何允许用户通过键盘切换并选择带有可见标签的不可见复选框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53753223/