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

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>

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

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

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:noned 它们。

是否有一种跨浏览器的方法可以让用户在这些单选按钮上TAB？

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

Answer 1

不要用 display: none; 让它不存在，只是缩小它。

您可以将 width 和 height 设置为 0 以使输入不可见但可以使用 tab 键。

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>