How can I make my modified radio buttons tabbable?

css, html, tabindex

Solution

If you hide the `input`s by setting their opacity to 0 they will still be tabbable:

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

jsfiddle

Problem

I've used some CSS to make mobile-friendly 'radio' buttons by hiding the `input`s and using the `label` elements instead. The code is below, but I've made a jsFiddle for convenience. My problem is that a major usability issue arises when using a keyboard to navigate the form: the fields are no longer tabbable. I've tried adding `tabindex` attributes to the hidden `input`s, the `labels` and to the `div`. The first two do not work at all, adding `tabindex` to the div works (the div is highlighted), but I can't interact with the form elements at all (with the arrow keys for example). Is it possible to fix this just with CSS/HTML? I'd rather not fall back to javascript, but if there's no other way I guess I'll have to. ``` <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> ```

Original source