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

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 ，然后使用向左/向右键选择“是”或“否”。

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

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>

但是，我现在无法再从文本input到单选按钮 TAB 。我知道这是因为我display:none杀死了他们。

是否存在一种跨浏览器方式，使用户能够 TAB 进入这些单选按钮？

理想情况下，我正在寻找纯CSS的解决方案，但是我愿意使用JavaScript解决方案。

Answer 1

不要使它与display: none;不存在，只是缩小它。

您只需将width和height设置为0即可使输入不可见，但可以通过制表键使用。

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

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="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>

Answer 2

不要隐藏单选按钮，而是用标签覆盖它们，而不要使用具有负左值的相对位置

并为标签上的焦点样式添加自定义CSS。更新了CSS

input[type="radio"]:focus+label {
  outline: 2px dotted red;
}

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;
  position: relative;
  left: -20px;
}

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

input[type="radio"]:focus+label {
  outline: 2px dotted red;
}

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;
  position: relative;
  left: -20px;
}

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>

Answer 3

单选按钮不是“可粘贴的”。您需要使用键盘上的箭头更改选定的收音机。当涉及到可访问性时，这是预期的行为。但是，我建议您以可视化的方式显示所选收音机的名称（就像您对标签所做的那样）。

这就是全部。

input[type="radio"] {
  opacity: 0;
  position: absolute;
  z-index: -1;
}

这是下面的最终答案

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

input[type="radio"] {
  opacity: 0;
  position: absolute;
  z-index: -1;
}

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>