如何允许使用箭头键在一组中导航收音机，同时使它们不可见并占用零空间

Question

在下面的片段中，您可以单击选项来选择它们，也可以使用箭头键在它们之间导航。

但左边有一个看不见的单选按钮，因为它占用了空间。

可以通过将收音机的display设置为none来消除此空间，但这会中断箭头键导航功能。

如何在不破坏箭头键导航的情况下清除空间？

* {
margin: 0;
padding: 0;
}
body {
background-color: DodgerBlue;
}
div {
background-color: black;
color: white;
}
input[type=radio] {
float: left;
opacity: 0;
}
input[type=radio]:checked~label>div {
background-color: white;
color: black;
}
ul {
list-style: none;
}

<ul>
<li>
<input type="radio" name="group" id="a">
<label for="a">
<div>foo</div>
</label>
</li>
<li>
<input type="radio" name="group" id="b">
<label for="b">
<div>bar</div>
</label>
</li>
<li>
<input type="radio" name="group" id="c">
<label for="c">
<div>baz</div>
</label>
</li>
</ul>

Answer 1

您可以将它们设置为position: absolute，以将它们从布局的标准流中删除。您也可以给它们一个非常高的top值来渲染屏幕中的它们。

* {
margin: 0;
padding: 0;
}
body {
background-color: DodgerBlue;
}
div {
background-color: black;
color: white;
}
input[type=radio] {
position: absolute;
opacity: 0;
top: -9999px;
}
input[type=radio]:checked~label>div {
background-color: white;
color: black;
}
ul {
list-style: none;
}

<ul>
<li>
<input type="radio" name="group" id="a">
<label for="a">
<div>foo</div>
</label>
</li>
<li>
<input type="radio" name="group" id="b">
<label for="b">
<div>bar</div>
</label>
</li>
<li>
<input type="radio" name="group" id="c">
<label for="c">
<div>baz</div>
</label>
</li>
</ul>