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

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 进入单选按钮和 select "Yes" 或 "No"使用左/右键。

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

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: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>

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

单选按钮不是 "tabbable"。您需要使用键盘箭头来更改所选的收音机。在可访问性方面，这是预期的行为。然而，我建议的是给出所选收音机的可视化表示（正如您已经对标签所做的那样）。

这就是全部要求。

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>

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

How to use keyboard tab on hidden radio buttons

html

javascript

css

user-experience

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

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

How to use keyboard tab on hidden radio buttons

html

javascript

css

user-experience

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

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