html - 可通过键盘导航的纯文本 HTML 单选按钮？

Question

此线程 ( Text only radio buttons ) 提供了一种制作仅显示文本的单选按钮的方法，周围有一个边框，当选择该按钮时，该边框会改变颜色。

问题是键盘导航在此设置中不起作用。这并不奇怪；它隐藏了单选按钮并仅显示标签。

有没有办法让纯文本单选按钮与键盘导航一起使用？

谢谢。

Answer 1

我能想到的没有 JavaScript 的唯一解决方案是在不使用 display: none 的情况下使按钮不可见，因为它不会呈现按钮，因此您无法导航它。

这可以通过不透明度来完成。这将使其不可见，但它仍会留在原处。为了使其不干扰其他元素，可以将其设置为position:absolute。所有烦恼都消失了。

参见:

label {
  display: inline-block;
  width: 100px;
  height: 50px;
  border: solid 2px red;
}

input[type="radio"] {
 opacity: 0;
 position: absolute;
}

input[type="radio"]:checked + label {
  border: solid 2px green;
}

<input type="radio" id="test" name="jeff">
<label for="test">Pizza</label>
<input type="radio" id="test2" name="jeff">
<label for="test2">Steak</label>

CBroe 提到的补充是使用.visuallyhidden类而不仅仅是使用不透明度。兼容性可能会更好。

input[type="radio"] {
  position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 1px; width: 1px; 
  margin: -1px; padding: 0; border: 0;
}