JavaScript: How to remove the "be pressed" checkbox?

Question

I override the mousedown event on the checkbox to enable selection by dragging other checkboxes. This is due to the need to make event.preventDefault() to disable the default behavior of the text.

Everything works as it should, except for one annoying tick, namely, the flag remains in the “click” state until I release the mouse (if this is not clear, try holding the mouse on the flag to see what I mean).

How to return the state of a flag in full or in full (without clicking)?

EDIT: jsfiddle with my code.

Answer 1

What you can do is override some CSS for the "checkbox are press" state with : active pseudo-class .

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

However, this approach would allow you to define your own rules for this state, rather than telling the browser to display the default system in its untouched state. This, of course, would not be bulletproof, but could be useful in your case.

For maximum control over the appearance, you need to implement a custom checkbox element or use one of the many libraries of the UI widget (for example, Dojo, ExtJS, UniformJS, etc.). These user widgets basically hide the real <input type="checkbox" /> , providing you with a "fake" element for interaction (but it only mimics the functionality of its own user interface).