如何允许用户通过键盘选项卡并选择带有可见标签的不可见复选框？
如何允许用户通过键盘选项卡并选择带有可见标签的不可见复选框？
提问于 2018-12-12 16:02:46
我正在使用“卡片”样式的复选框--有三个带有相应标签的不可见复选框(opacity: 0)被显示为有背景的框。
当单击标签时，选中复选框，然后将其标签更改为蓝色背景。这一切都很好，除了我发现，我不能通过标签和选择相应的复选框时，标签本身是通过点击空格键聚焦。
复选框本身可以被标签和选择空格，但不能当标签集中在.在标签之间。
注意:我在标签上设置了一个tabindex="0"，这样就可以将注意力集中在标签上并突出显示。
在没有JavaScript的情况下，有什么方法可以完成这个任务吗？我正在为一个角度应用程序开发UI，但我没有太多的角度知识。
我知道不同浏览器的选项卡和输入选择也有不一致之处(我正在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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-12-12 16:07:01
如果我正确地理解了你的问题，那么你所需要的就可以通过:focus选择器实现。您可以添加以下CSS：
input[type="checkbox"]:focus + label {
border:2px solid red;
}这将导致在相应的复选框有焦点时，在标签周围显示红色边框。这将允许用户在“通过”复选框集合“选项卡”时跟踪哪个复选框具有焦点。
此外，考虑更新复选框输入的tabindex，如下所示，以获得一致/有序的选项卡导航：
/* 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;
}
/* Add this */
input[type="checkbox"]:focus + label {
border:2px solid red;
}<input type="checkbox" id="1">
<label for="1" tabindex="0"></label>
<input type="checkbox" id="2">
<label for="2" tabindex="1"></label>
<input type="checkbox" id="3">
<label for="3" tabindex="2"></label>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53753223
复制
相似问题
并行执行Xcode 10 UI测试时禁用模拟器的连接硬件键盘设置
Xcode UI测试错误键盘
如何在xcode ui测试中使用Swift代码旋转模拟器
Xcode UI测试不会自动启动模拟器
Android模拟器硬件键盘[Esc]键
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
