如何在隐藏的单选按钮上使用键盘选项卡

Question

在表单中，我有以下通用 html：

<input type="text" autofocus placeholder="Full name" />

<input name="yesno" type="radio" value="Yes" id="yes">
<label for="yes">Yes</label>

<input name="yesno" type="radio" value="No" id="no">
<label for="no">No</label>

在这种形式中，我可以TAB从文本input进入单选按钮，然后使用左/右键选择“是”或“否”。

然后，我应用一些样式以使单选按钮符合设计：

input[type="text"] {
  height: 60px;
  text-indent: 1em;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]+label {
  color: #106AA2;
  background: #fff;
  font-weight: 100;
  text-align: center;
  padding: 1em 2em;
  height: auto;
  font-size: 1.3em;
  border: 1px solid #C5DBE8;
  display: inline-block;
  letter-spacing: inherit;
  vertical-align: middle;
  cursor: pointer;
}

input[type="radio"]:checked+label {
  background: linear-gradient(#1275B2, #106AA2);
  color: #fff;
}

<input type="text" autofocus placeholder="Full name" />

<input name="yesno" type="radio" value="Yes" id="yes">
<label for="yes">Yes</label>

<input name="yesno" type="radio" value="No" id="no">
<label for="no">No</label>

但是，我现在无法再TAB从文本input转到单选按钮。我知道这是因为我已经display:none删除了它们。

是否有跨浏览器的方式使用户能够TAB使用这些单选按钮？

理想情况下，我正在寻找一个纯 CSS 的解决方案，但是我对 javascript 解决方案持开放态度。

Answer 1

不要display: none;仅仅缩小它就使其不存在。

您只需设置width和heightto0即可使输入不可见，但可以使用选项卡。

input[type="text"] {
  height: 60px;
  text-indent: 1em;
}

input[type="text"]:focus {
  outline: solid 1px lightblue;
}

input[type="radio"] {
  /* display: none; */
  width: 0;
  height: 0;
}

input[type="radio"]+label {
  color: #106AA2;
  background: #fff;
  font-weight: 100;
  text-align: center;
  padding: 1em 2em;
  height: auto;
  font-size: 1.3em;
  border: 1px solid #C5DBE8;
  display: inline-block;
  letter-spacing: inherit;
  vertical-align: middle;
  cursor: pointer;
}

input[type="radio"]:checked+label {
  background: linear-gradient(#1275B2, #106AA2);
  color: #fff;
}

input[type="radio"]:focus+label {
  outline: solid 1px black;
}

<input type="text" autofocus placeholder="Full name" />

<input name="yesno" type="radio" value="Yes" id="yes">
<label for="yes">Yes</label>

<input name="yesno" type="radio" value="No" id="no">
<label for="no">No</label>