How to remove the default button highlighting in Safari when using jQuery

Question

I have noticed that under Safari on OS X my default jQuery buttons appear to have a blue glow highlight around them. Just checked and the same thing happens on the jQuery UI Demo page.

Under Firefox on my same machine it looks like this

Can anyone tell me what I can do to remove this under Safari? I would still like the default behaviour.

Answer 1

To remove any highlight of inputs that any browser may apply as default action you can always use outline:none for their css. in your case it's a button element. so this should work:

button {
    outline: none;
}

Although it's not recommended to remove the CSS outline. as it's is bad for accessibility. (Thanks Robin Clowers for mentioning this)

Answer 2

Try using this

In CSS :

-webkit-tap-highlight-color: rgba(0,0,0,0);

In Javascript :

document.addEventListener("touchstart", function(){}, true);