How to remove focus around buttons on click

Question

My buttons all have a highlight around them after I click them. This is in Chrome.

Answer 1

If you use the rule :focus { outline: none; } to remove outlines, the link or control will be focusable but with no indication of focus for keyboard users. Methods to remove it such with JS like onfocus="blur()" are even worse and will result in keyboard users being unable to interact with the control.

The hacks you can use, that are sort of OK, includes adding :focus { outline: none; } rules when users interacts with the mouse and remove them again if keyboard interaction is detected. Lindsay Evans has made a lib for this: https://github.com/lindsayevans/outline.js

But i would prefer to setting a class on the html or body tag. And have control in the CSS file of when to use this.

For example (inline event handlers is for demonstration purposes only):

    
This her is a link
   
    Click me

I did put togheter a Pen: http://codepen.io/snobojohan/pen/RWXXmp

But beware there are performance issues. This forces repaint every time the user switches between mouse and keyboard. More about Avoiding Unnecessary Paints http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/