无法专注于使用tabindex的复选框

Question

我无法专注于tabindex = 0的复选框。我认为这是由于显示和不透明度设置

.newCheckbox input[type=checkbox] {
   display: none;
    opacity: 0;
}

我也在复选框前面有一个标签。是否可以更改代码以使复选框标签显示为高亮显示 - 以使外观像在选项卡上突出显示复选框一样。

plunkr - https://plnkr.co/edit/6ecZu1G8tKzztGGbK4G3?p=preview

Answer 1

不确定您为什么要这样做，但您可以将焦点复选框的opacity更改为1，如下所示：

input[type=checkbox] {
  opacity: 0;
}

input[type=checkbox]:focus {
   opacity: 1;
}

这不会改变事实上用户最初看不到的事实，除非他们用键盘偶然键入它！

我可能建议用these techniques中的一个来隐藏输入，写下你的标记：

<input type="checkbox" id="title"><br>
<label for="title">Male</label>

然后使用直接兄弟选择器label设置+样式，即

[type=checkbox] + label {
  //custom css here 
}

标签将获得焦点而不是输入，您可以更好地控制样式：）