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.
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.
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/