Javascript 如何在隐藏的单选按钮上使用键盘选项卡

在表单中，我有以下通用html：

对
否

使用显示：无，不要使其不存在缩小它就行了。 您只需将

宽度

和

高度

设置为

0

，即可使输入不可见，但可通过选项卡进行操作

input[type=“text”]{
高度：60px；
文本缩进：1em；
}
输入[type=“radio”]{
/*显示：无*/
宽度：0；
身高：0；
}
输入[type=“radio”]+标签{
颜色：#106AA2；
背景：#fff；
字号：100；
文本对齐：居中；
填料：1米2米；
高度：自动；
字体大小：1.3em；
边框：1px实心#C5DBE8；
显示：内联块；
字母间距：继承；
垂直对齐：中间对齐；
光标：指针；
}
输入[type=“radio”]：选中+标签{
背景：线性梯度（#1275B2，#106AA2）；
颜色：#fff；
}

对
否

使用显示：无，不要使其不存在缩小它就行了。 您只需将

宽度

和

高度

设置为

0

，即可使输入不可见，但可通过选项卡进行操作

input[type=“text”]{
高度：60px；
文本缩进：1em；
}
输入[type=“radio”]{
/*显示：无*/
宽度：0；
身高：0；
}
输入[type=“radio”]+标签{
颜色：#106AA2；
背景：#fff；
字号：100；
文本对齐：居中；
填料：1米2米；
高度：自动；
字体大小：1.3em；
边框：1px实心#C5DBE8；
显示：内联块；
字母间距：继承；
垂直对齐：中间对齐；
光标：指针；
}
输入[type=“radio”]：选中+标签{
背景：线性梯度（#1275B2，#106AA2）；
颜色：#fff；
}

对
否

不要隐藏单选按钮，用标签覆盖它们，而是使用左负值的相对位置

并为标签上的焦点样式添加自定义CSS。更新的CSS

input[type="radio"]:focus+label {
  outline: 2px dotted red;
}

input[type="radio"]+label {
  color: #106AA2;
  background: #fff;
  font-weight: 100;
  text-align: center;
  padding: 1em 2em;
  height: auto;
  font-size: 1.3em;
  border: 1px solid #C5DBE8;
  display: inline-block;
  letter-spacing: inherit;
  vertical-align: middle;
  cursor: pointer;
  position: relative;
  left: -20px;
}

input[type=“text”]{
高度：60px；
文本缩进：1em；
}
输入[type=“radio”]：焦点+标签{
轮廓：2倍点红色；
}
输入[type=“radio”]+标签{
颜色：#106AA2；
背景：#fff；
字号：100；
文本对齐：居中；
填料：1米2米；
高度：自动；
字体大小：1.3em；
边框：1px实心#C5DBE8；
显示：内联块；
字母间距：继承；
垂直对齐：中间对齐；
光标：指针；
位置：相对位置；
左：-20px；
}
输入[type=“radio”]：选中+标签{
背景：线性梯度（#1275B2，#106AA2）；
颜色：#fff；
}

对
否

不要隐藏单选按钮，用标签覆盖它们，而是使用左负值的相对位置

并为标签上的焦点样式添加自定义CSS。更新的CSS

input[type="radio"]:focus+label {
  outline: 2px dotted red;
}

input[type="radio"]+label {
  color: #106AA2;
  background: #fff;
  font-weight: 100;
  text-align: center;
  padding: 1em 2em;
  height: auto;
  font-size: 1.3em;
  border: 1px solid #C5DBE8;
  display: inline-block;
  letter-spacing: inherit;
  vertical-align: middle;
  cursor: pointer;
  position: relative;
  left: -20px;
}

input[type=“text”]{
高度：60px；
文本缩进：1em；
}
输入[type=“radio”]：焦点+标签{
轮廓：2倍点红色；
}
输入[type=“radio”]+标签{
颜色：#106AA2；
背景：#fff；
字号：100；
文本对齐：居中；
填料：1米2米；
高度：自动；
字体大小：1.3em；
边框：1px实心#C5DBE8；
显示：内联块；
字母间距：继承；
垂直对齐：中间对齐；
光标：指针；
位置：相对位置；
左：-20px；
}
输入[type=“radio”]：选中+标签{
背景：线性梯度（#1275B2，#106AA2）；
颜色：#fff；
}

对
否

单选按钮本身不是“可选项卡式”的。您需要使用键盘箭头来更改选定的收音机。在可访问性方面，这是预期的行为。然而，我的建议是给出所选收音机的视觉表示（正如您已经对标签所做的那样）

这就是所需要的一切

input[type="radio"] {
  opacity: 0;
  position: absolute;
  z-index: -1;
}

这是下面的最终答案

input[type=“text”]{
高度：60px；
文本缩进：1em；
}
输入[type=“radio”]{
不透明度：0；
位置：绝对位置；
z指数：-1；
}
输入[type=“radio”]+标签{
颜色：#106AA2；
背景：#fff；
字号：100；
文本对齐：居中；
填料：1米2米；
高度：自动；
字体大小：1.3em；
边框：1px实心#C5DBE8；
显示：内联块；
字母间距：继承；
垂直对齐：中间对齐；
光标：指针；
}
输入[type=“radio”]：选中+标签{
背景：线性梯度（#1275B2，#106AA2）；
颜色：#fff；
}

对
否

单选按钮本身不是“可选项卡式”的。您需要使用键盘箭头来更改选定的收音机。在可访问性方面，这是预期的行为。然而，我的建议是给出所选收音机的视觉表示（正如您已经对标签所做的那样）

这就是所需要的一切

input[type="radio"] {
  opacity: 0;
  position: absolute;
  z-index: -1;
}

这是下面的最终答案

input[type=“text”]{
高度：60px；
文本缩进：1em；
}
输入[type=“radio”]{
不透明度：0；
位置：绝对位置；
z指数：-1；
}
输入[type=“radio”]+标签{
颜色：#106AA2；
背景：#fff；
字号：100；
文本对齐：居中；
填料：1米2米；
高度：自动；
字体大小：1.3em；
边框：1px实心#C5DBE8；
显示：内联块；
字母间距：继承；
垂直对齐：中间对齐；
光标：指针；
}
输入[type=“radio”]：选中+标签{
背景：线性梯度（#1275B2，#106AA2）；
颜色：#fff；
}

对
否

可能重复嘿，你试过我的答案吗？：）是的。我喜欢使用

outline

来指示选择单选按钮的时间。我选择使用@chbchb55的答案，因为

位置：相对
方法改变了元素之间的差距，这比我想要的要多。酷，谢谢你的回答：）可能重复嘿，你试过我的答案了吗？：）是的。我喜欢使用
outline
来指示选择单选按钮的时间。我选择了@chbchb55的答案，因为
位置：相对的
方法改变了元素之间的差距，这比我想要的要多。很酷，谢谢你的回答：）在发布答案之前，你真的运行并测试了你的代码吗<代码>我现在无法再从文本输入到单选按钮进行制表。
，请尝试制表，它不会起作用