Question

我使用了一些CSS来隐藏input并使用label元素来制作适合移动设备的“收音机”按钮。代码如下，但我做了jsFiddle for convenience。

我的问题是，当使用键盘导航表单时会出现一个主要的可用性问题：字段不再是可列表的。我已尝试将tabindex属性添加到隐藏的input，labels和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 + label:before{
    content:"✔";
}
</style>

Answer 1

如果您通过将不透明度设置为0来隐藏input，则它们仍然可以标记：

.radio-select input[type='radio']{
    opacity:0;
    filter:alpha(opacity=0);
    position:absolute
}

jsfiddle

如何使我修改过的单选按钮可以删除？

1 个答案: