What would cause a browser to plaster a "focus halo" around an HTML element when it is clicked?
This is happening on a custom button bar (think radio buttons) that uses elements + CSS styles to reflect button state. When one of spans is clicked Chrome is wrapping an orange line around it, whereas Firefox is using a black dotted line.
I know it sounds stupid-simple, and probably is, but it's giving me fits trying to identify where this behavior is coming from - as for some this is the only component within the entire application that suffers from this browser behavior.
Any ideas where/how to stop the browser from doing this?
FWIW, this is sole listener attachment, and the behavior continues even when it is removed:
tab.addEventListener("mousedown", this.e_tabMouseDown, false)
Per posted suggestions, the CSS has been modified to include with these additions: -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; -o-user-select: none; user-select: none;
but the problem is still persisting. To be more specific, this behavior isn't highlighting any selected text - it's just drawing a focus box where it's not wanted.
UPDATE ANSWER: While the CSS mods suggested above will get rid of text highlighting, the focus "halo" can be knocked out with this style rule: outline: none;
While the CSS mods suggested in the linked post will get rid of text highlighting, the focus "halo" can be knocked out with this style rule:
outline: none;