Clever Geek Handbook

Jquery Getting rid of dotted line around buttons

I'm trying to get rid of the dotted line that appears in FF when you press the type enter button. This outline is not visible in Chrome.

I tried:

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

None of these works. Does anyone know a real solution? Thank.

Edit: Looking for a better solution.

onclick blinks the outline like it appears and then disappears when the mouse button is pressed. I tried to bind blur to mousedown and mouseup, but the flash persists.

Anyone have any better ideas?

Thank.

Edit again:

The solution works in the latest version of FF. It looks like the bug has been fixed or something.

+2


source to share


2 answers


Hey you can try adding blur () event:



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


source


A dotted outline is Firefox's way of telling the user which element has focus. If you are writing some kind of client application where buttons / links / elements are clicked and the DOM is not changing, you will see an FF focus focus. The only way to get rid of this is to blur()

target the event element.

Here is a shotgun / overkill method of how to do it with jquery:



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


source






More articles:


All Articles