How do I remove the dotted line on my image button when I click it in firefox?

Question

I'm using this jfiddle. In chrome when I click the image it doesn't produce a dotted line but when I click the image in firefox a dotted line appears.

.

How can I remove the dotted line?

I've tried:

#myButton:focus {
  outline: 0;
}

#myButton:active {
  outline: none;
  border: none;
}

But that didn't work.

Answer 1

Try this:

button::-moz-focus-inner {
    border:0;
}

button can be replaced with whatever selector for which you want to disable the behavior.

P.S: It also works without a selector by just using ::-moz-focus-inner.

JSFiddle Demo