代码之家 › 专栏 › 技术社区 › GirkovArpa

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

linear-gradients display radio-button css html

GirkovArpa · 技术社区 · 5 年前

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

但是在左边有一个空间,隐藏的单选按钮就在那里,因为它占用了空间。

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>

1 回复 | 直到 5 年前

Ori Drori 5 年前

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