Как я могу сделать мои измененные переключатели с вкладками?

Question

Я использовал немного CSS, чтобы создавать удобные для радио кнопки, скрывая inputс и используя label элементы вместо. Код ниже, но я сделал jsFiddle для удобства.

Моя проблема заключается в том, что при использовании клавиатуры для навигации по форме возникает серьезная проблема с удобством использования: поля больше не являются вкладками. Я пытался добавить 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

Если вы прячете inputs, установив их непрозрачность на 0, они по-прежнему будут иметь табуляцию:

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

jsfiddle