Html 如何使修改后的单选按钮选项卡化？

我使用了一些CSS，通过隐藏

输入

s并使用

标签

元素，制作了便于移动的“单选”按钮。代码在下面，但我做了一个修改

我的问题是，使用键盘导航表单时会出现一个主要的可用性问题：字段不再是可选项卡的。我尝试将

tabindex

属性添加到隐藏的

输入

s、

标签

和

div

。前两个根本不起作用，将

tabindex

添加到div可以起作用（div高亮显示），但我根本无法与表单元素交互（例如使用箭头键）

仅仅用CSS/HTML就可以解决这个问题吗？我不想回到javascript，但如果没有其他方法，我想我不得不这么做

<input type='text'>
<div class='radio-select'>
  <input checked="checked" id="no" name="yes_no" value="False" type="radio">
  <label for="no">
    No
  </label>
  <input id="yes" name="yes_no" value="True" type="radio">
  <label for="yes" >
    Yes
  </label>
</div>
<input type='text'>
<style>
.radio-select label{
    background: #f00;
    border:1px solid #ddd;
    border-radius:10px;
    padding:10px;
    margin:5px 0;
    max-width:200px;
    clear:both;
    display: block;
    cursor:pointer;
}
.radio-select input[type='radio']{
    display: none;
}
.radio-select input[type='radio']:checked + label{
    background:#0f0 !important;
}
.radio-select input[type='radio']:checked + label:before{
    content:"✔";
}
</style>

不
对
.无线电选择标签{
背景：#f00；
边框：1px实心#ddd；
边界半径：10px；
填充：10px；
保证金：5px0；
最大宽度：200px；
明确：两者皆有；
显示：块；
光标：指针；
}
.收音机选择输入[type='radio']{
显示：无；
}
.收音机选择输入[type='radio']：选中+标签{
背景：#0f0！重要；
}
.收音机选择输入[type='radio']：选中+标签：在{
内容：“✔";
}

如果通过将不透明度设置为0来隐藏

输入

s，它们仍将是可选项卡：

.radio-select input[type='radio']{
    opacity:0;
    filter:alpha(opacity=0);
    position:absolute
}

---

这会聚焦它们，是的，但实际上并没有选择它们。我可以添加一些javascript来实现这一点，但这并不理想。你不应该将单选按钮的显示设置为“无”，你应该将它们的不透明度设置为0，这样它们就不可见了，但可以通过键盘进行标记和选择。@TomMedley，我已经更新了代码。现在你可以通过gh使用箭头键标记标签。在我的页面中（最小值：只有

中的一些

，在任何元素上都没有任何

tabindex=“0”

属性，并且根本没有CSS/样式），我发现无线电输入根本无法使用Tab键进行聚焦。你确定这有效吗？