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

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.

Default button highlighting under Safari

Under Firefox on my same machine it looks like this

enter image description here

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


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)


Try using this

In CSS :

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

In Javascript :

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


*{
    outline: none;
}

.blah{
    outline-color: blue;
}

This will not affect the existed ones. (.blah) This works on Google Chrome too.

Live demo: http://jsfiddle.net/DerekL/TUbjc/