1

So I have a standard implementation in a React app:

<button
   onClick={this.handleClick.bind(this)}
   className="button--round">
   {buttonContent}
</button>

Strangely, the button looks fine in a laptop browser (clicking with mouse), but in Firefox on my Android phone, as soon as I touch the button, it gets a horrible dotted border (which stays until I touch elsewhere) - it looks like the "focus" behaviour (like pressing tab through the interface on a keyboard) like this:

focus effect

I've tried:

button:active,
button:focus {
  outline: none;
}

With no improvement. I also searched the various "sticky hover" answers on here and disabled hover totally, with no effect. Any suggestions?

BruceM
  • 1,549
  • 1
  • 18
  • 41
  • 1
    Have you [tried this](https://stackoverflow.com/questions/71074/how-to-remove-firefoxs-dotted-outline-on-buttons-as-well-as-links)? `button::-moz-focus-inner { border: 0; }` – Tholle Aug 11 '18 at 15:11
  • 1
    Perfect - that did it, thanks so much! – BruceM Aug 11 '18 at 15:16

1 Answers1

1

You can remove the border of the pseudo-element -moz-focus-inner to get rid of this behavior.

button::-moz-focus-inner {
  border: 0;
}
Tholle
  • 108,070
  • 19
  • 198
  • 189