Removing dotted borders on click

Question

Hello,

I am using this css to remove dotted borders which appear when hyperlinks are clicked

a:active, a:focus, input {
    outline: 0;
    outline-style:none;
    outline-width:0;
}

This is working fine, but doesn't work on input buttons which have background images.

For Eg:

Please help me remove dotted border because it ruins the whole design.

Thank You.

Answer 1

It isn't working fine. It is rendering it impossible to navigate the design without a mouse.

See http://24ways.org/2009/dont-lose-your-focus for a reasonable compromise.

Answer 2

You could add an onclick: blur(); so it keeps it tab-happy and doesn't ruin the design when clicked.

But for the record, this seems to work cross browser. The first part for IE, the second for FF:

input, input:active, input:focus{
    outline: 0;
    outline-style:none;
    outline-width:0;
}

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: none;
}

Answer 3

You need classes to differentiate which links have dotted borders and which do not. Using the img selector won't be enough.

Style your input tags to not have dotted borders; you could even use a class for your input buttons if you have more than one style (Clear, Submit, Cancel, etc.)

Answer 4

It's not my place to question your design decisions, so here you go.

Just add this to any link's you want to remove the dotted line

onfocus="if(this.blur)this.blur()"