相关疑难解决方法(0)

我已经使用一些CSS来制作适合移动设备的"收音机"按钮,方法是隐藏inputs并使用label元素代替.代码如下,但为方便起见,我已经制作了一个jsFiddle.

我的问题是当使用键盘导航表单时出现了一个主要的可用性问题:字段不再是可列表的.我已经尝试将tabindex属性添加到隐藏的inputs,the labels和to div.前两个根本不起作用,添加tabindex到div工程(div突出显示),但我根本无法与表单元素交互(例如使用箭头键).

是否可以使用CSS/HTML来解决这个问题？我宁愿不回到javascript,但如果没有其他方式,我想我将不得不这样做.

<input type='text'>
<div class='radio-select'>
  <input checked="checked" id="no" name="yes_no" value="False" type="radio">
  <label for="no">
    No
  </label>
  <input id="yes" name="yes_no" value="True" type="radio">
  <label for="yes" >
    Yes
  </label>
</div>
<input type='text'>
<style>
.radio-select label{
    background: #f00;
    border:1px solid #ddd;
    border-radius:10px;
    padding:10px;
    margin:5px 0;
    max-width:200px;
    clear:both;
    display: block;
    cursor:pointer;
}
.radio-select input[type='radio']{
    display: none;
}
.radio-select input[type='radio']:checked + label{
    background:#0f0 !important;
}
.radio-select input[type='radio']:checked …

在表单中，我有以下通用 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" …