Forcing a tab stop on a hidden element? Possible?

Question

The site is here: http://tinyurl.com/2wj8qb4

I have opt to using the radiobutton's labels as customized buttons for them. This means the radio inputs themselves are display:none. Because of this, the browsers don't tab stop at the radio labels, but I want them to.

I tried forcing a tabindex to them, but no cigar.

I have came up with just putting a pointless checkbox right before the labels, and set it to width: 1px; and height 1px; which seems to only really work on chrome & safari.

So do you have any other ideas for forcing a tab stop at those locations without showing an element?

Edit:

Just incase someone else comes by this, this is how I was able to insert small checkboxes into chrome & safari using JQuery:

if ($.browser.safari) {
    $("label[for='Unlimited']").parent().after('<input style="height:1px; width:1px;" type="checkbox">');
    $("label[for='cash']").parent().after('<input style="height:1px; width:1px;" type="checkbox">');
    $("label[for='Length12']").parent().after('<input style="height:1px; width:1px;" type="checkbox">');
}

Note: $.browser.webkit was not becoming true...so I had to use safari

Answer 1

Discard the radio-buttons and instead; keep some hidden fields in your code, in which you store the selected value of your UI components.

Answer 2

Keep the radio input hidden, but set tabindex="0" on the <label> element of reach radio input.

(A tab index of 0 keeps the element in tab flow with other elements with an unspecified tab index which are still tabbable.)

Answer 3

If you separate the label from any field and set a tabIndex you can tab to it and capture mouse and key events. It seems more sensible to use buttons or inputs with type="button", but suit yourself.

<form>
<fieldset>
<input value="today">
<label tabIndex="0" onfocus="alert('label');">Label 1</label>
</fieldset>
</form>