how to avoid dotted line around check box , when user clicks?

Question

I need to avoid the creation of dotted line around the check box , when user clicks the check box in IE.

See how it appears when the user clicks ,

How do I remove the dotted line around the check box using css ?

Answer 1

Set the outline property to 0:

input {
    outline: 0;
}

It might not work in IE9 (as documented by Chris Coiyer). You might have to use this meta tag:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Answer 2

Use a global rule this works on any element which has a focus

*:focus {
outline: none;
}

Answer 3

Try this

input[type='checkbox'] {
  outline:0;
}

Answer 4

That's called an outline, try using outline: 0;