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

Answer 2

Here is updated jsfiddle code

Basically you want to blur it onfocus with javascript. If using jquery:

$(function() {
    var button = $("#myButton");
    $(button).focus(function() { 
        $(this).blur();
    }); 
});

Or without jquery something like this:

var button = document.getElementById("myButton");
button.onfocus = function() { button.blur(); }

With my test on Firefox on Ubuntu, original jfiddle produced dotted line, updated does not.