当使用自定义设计设置为隐藏时，复选框标签索引无效 [英] Checkbox tab index not working when set to hidden with custom design

问题描述

我使用复选框，并使用CSS添加自定义设计

I'm using a checkbox and adding a custom design to it using CSS

label {
  position: relative;
  margin-bottom: 0.5em; }

.input-field {
  width: 100%;
  border: 1px solid #ecf0f1;
  padding: 0.5em;
 }

input[type="radio"],
input[type="checkbox"] {
  display: none; 
}

input[type="checkbox"] + label {
  padding-left: 1.5em; 
}

input[type="checkbox"] + label:before {
  position: absolute;
  left: 0;
  top: 4px;
  content: "";
  width: 1em;
  height: 1em;
  border: 1px solid rgba(0, 0, 0, 0.25); 
}

input[type="checkbox"]:focus,
input[type="checkbox"]:checked + label:before {
  content: "\2713"; /* "✓" */ 
}

但问题是，使用带有Tab键的键盘复选框被忽略。如何将其包含在导航流程中？

But the problem is that when navigating the form with the keyboard with the tab key the check box is ignored. How can I include it in the flow of navigation?

演示

推荐答案

我将其从display：none;到不透明度：0;并且工作正常这里是新编辑的代码

I changed it from display: none; to opacity: 0; and it works fine here is the new edited code

http://jsbin.com / yuxizazo / 1

这篇关于当使用自定义设计设置为隐藏时，复选框标签索引无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！