当隐藏输入类型收音机并显示标签时，如何在单选按钮之间使用箭头键导航？

Question

我有一个单选按钮组，当显示相关标签时，单选按钮被隐藏。假设单选按钮组被称为颜色。当选择某种颜色时，我会用该颜色突出显示标签。当我单击所有标签时，这是很好的。但我也想使用箭头键在标签之间导航。我意识到，由于输入是隐藏的，箭头的运动是没有效果的。但有什么办法可以绕过这件事吗？

HTML：

<div>
    <input type="radio" name="color" value="blue" id="blue"><label for="blue">Blue</label><br>
    <input type="radio" name="color" value="red" id="red"><label for="red">Red</label><br>
    <input type="radio" name="color" value="green" id="green"><label for="green">Green</label><br>
    <input type="hidden" value="" id="color_selected"/>
</div>

CSS：

input {
    display: none;
}

联署材料：

$(document).ready(function() {
    $('input[name="color"]').change(function() {
        var prevColor = $('#color_selected').val();
        if (prevColor) {
            $('#' + prevColor).next('label').css({'background':'#FFFFFF'});
        }
        var color = jQuery(this).val();
        $(this).next('label').css({'background':color});
        $('#color_selected').val(color);
    });
});

http://jsfiddle.net/nkqLj/

谢谢您抽时间见我。

Answer 1

而不是display:none，而是通过将输入字段定位到远离的位置来模拟隐藏。

input {
    left: -1000px;
    position: absolute;
}

http://jsfiddle.net/nkqLj/1/