How to cancel HTML "onfocus" behavior?

Question

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;

Answer 1

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;

Answer 2

This is the browser's default behavior and can be over-ridden using CSS. See the answer to this question: How to disable text selection highlighting using CSS?