JavaScript: How do I remove 'being pressed' state from checkbox?

Question

I'm overriding the mousedown event on a checkbox to enable selecting via dragging across other checkboxes. This involves having to do event.preventDefault() to disable the default text selection behavior.

Everything works as it should, except one annoying tic, namely the checkbox remains in the 'being pressed' state until I let go of the mouse (if that isn't clear, try holding down the mouse on a checkbox to see what I mean).

How do I revert the checkbox's state to either fully off or fully on (not 'being pressed')?

EDIT: Here is a jsfiddle with my code.

Answer 1

What you can do is override some CSS for the "checkbox being pressed" state via the :active pseudo-class.

​input[type=checkbox]:active {
    outline: none;
    border: none;
    /* etc...*/
}​​​​​​

However this approach would only let you define your own rules for this state, not tell the browser to render a default system checkbox in its untouched state. This would of course be not bullet-proof but might come satisfactory in your case.

For maximum control over appearance you need to implement a custom checkbox component or use one of the many UI widget libraries out there (like Dojo, ExtJS, UniformJS etc.). These custom widgets basically hide the real <input type="checkbox" /> giving you a "fake" element to interact with (but that mimics the native UI control functionality only it's fully themable).