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

Question

此线程（Text only radio buttons）提供了一种制作单选按钮的方法，该按钮仅显示文本，并在选择按钮时由边框改变颜色。

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

有没有办法让纯文字的单选按钮与键盘导航配合使用？

谢谢。

Answer 1

我可以在没有使用Javascript的情况下考虑的唯一解决方案是在不使用display: none的情况下使按钮隐藏，因为它不会渲染按钮，因此您无法导航它。

这可以通过opacity来完成。这将使它隐形，但它仍然在那里。为了使其不会干扰其他元素，您可以将其设置为position: absolute。一切烦恼都消失了。

请参阅：

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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;
}

Answer 2

以下W3C页面介绍了使用ARIA制作自定义无线电元素的方法：

ARIA radiogroup and radio Example

您不应该对本机无线电元素使用任何CSS技巧，因为它可能导致意外行为。例如，将原始radio元素与屏幕阅读器聚焦可能并不总是在标签周围显示焦点指示符（轮廓），而是围绕复选框显示，如果隐藏了该复选框，则对于视力不佳的人来说这是有问题的。