How can I stop a HTML checkbox from getting focus on click?

Question

Anyone know how to prevent an HTML checkbox from getting focus when clicked? I still want it to change state, just not get focus.

Answer 1

You can prevent the focus by using preventDefault() in a mousedown handler:

$('input[type=checkbox]').mousedown(function (event) {
    // Toggle checkstate logic
    event.preventDefault(); // this would stop mousedown from continuing and would not focus
});

In pure JavaScript:

checkbox.onmousedown = function (event) {
    // Toggle checkstate logic
    event.preventDefault(); // this would stop mousedown from continuing and would not focus
}