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

问题描述

在下面的代码段中，您可以单击选项以选择它们，也可以使用箭头键在其中进行导航。

但是在左侧，有一个不可见的单选按钮，因为它占用了空间。

可以通过将收音机的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>

解决方法

您可以将它们设置为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>