tabIndex doesn't make a label focusable using Tab key

Question

I\'m trying to replace checkbox/radio inputs with icons. For this, I need to hide the original checkbox/radio. The problem is, I also want the form to properly support keyboard

Answer 1

As previous posters said: Label focus always goes directly to the input element.

Quite an annoyance if somebody has fancy (but fake) checkboxes, hiding the original ones, with an actual focus for keyboard navigation nowhere to be seen.

best solution I can think of: javascript.

Style-away the actual focus, in favor of a fake one:

    input[type=checkbox]:focus {
        outline: none;
    }
    .pseudo-focus {
        outline: 2px solid blue;
    }

and watch for changes on the (in many scenarios visibly hidden) original checkbox:

    $('input[type=checkbox')
        .focus( function() {
            $(this).closest('label').addClass('pseudo-focus');
        })
        .blur( function() {
            $(this).closest('label').removeClass('pseudo-focus');    
        });

Full jsfiddle here.