1

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;

mjk
  • 659
  • 1
  • 9
  • 20

2 Answers2

2

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;

mjk
  • 659
  • 1
  • 9
  • 20
0

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?

Community
  • 1
  • 1
cfs
  • 10,610
  • 3
  • 30
  • 43
  • Thank you. Any ides as to why are none of the other site elements having this behavior - and not a single one of them uses any type of CSS setting mentioned in that post. (Including other span buttons.) For example, the page I'm debugging has 13 other buttons on it - none of which get that highlight when clicked? – mjk May 29 '13 at 19:24
  • The CSS modification didn't help - the question has been edited to reflect the CSS changes. – mjk May 29 '13 at 19:42