jquery Getting rid of dotted outline around buttons

Question

I'm trying to get rid of the dotted outline that appears in FF when you click an input of type button. This outline doesn't appear in Chrome.

I've tried:

.button {
    border:none;
    outline:none;
}
.button:active {
    border:none;
    outline:none;
}
.button:focus {
    border:none;
    outline:none;
}

None of these work. Anyone know the real solution? Thanks.

Edit: Looking for a better solution.

onclick flashes the outline, as in, it appears, and then disappears on mouseup. I tried binding the blur to mousedown and mouseup, but the flash persists.

Anyone have any better ideas?

Thanks.

Edit again:

Solution works in latest version of FF. Looks like a bug was fixed or something.

Answer 1

Hey you could try adding a blur() event:

<input type="button" value="test" onclick="this.blur()" />

Answer 2

The dotted outline is Firefox's way of indicating to the user what element has focus. If you're writing some sort of client application where buttons/links/elements are clicked and that DOM isn't changed, then you will see FF's focus outline. The only way to get rid of this is to blur() the target element of the event.

Here's a shotgun/overkill method of how to do this with jquery:

$(function() {
    $('.autoblur').live("click", function(event) {
        this.blur();
    });
});