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

Question

在下面的代码片段中，您可以点击 select 选项，也可以使用箭头键在它们之间导航。

但是在左边隐藏单选按钮的地方有一个space，因为它占用了space。

可以通过将收音机的 display 设置为 none 来删除此 space，但这会破坏箭头键导航功能。

如何在不破坏箭头键导航的情况下摆脱 space？

* {
  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>

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

How to allow navigating radios in a group with arrow keys, and also make them invisible and take up zero space?

html

css

radio-button

display

linear-gradients