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

CssJquery Ui

Css Problem Overview

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.

Css Solutions

Solution 1 - Css

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)

Solution 2 - Css

Try using this

In CSS :

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

In Javascript :

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

Solution 3 - Css

*{
    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/

Solution 4 - Css

This button has actually an outline property defined. You have to override this. If you inspect this in Firebug you will see the following CSS declaration for this button:

.ui-dialog .ui-dialog-buttonpane button{outline:none;}
Categories
Recommended Css Solutions
Recommended Jquery Ui Solutions

Previous Solution:

After the rotate, onCreate() Fragment is called before onCreate() FragmentActivity

AndroidAndroid FragmentsOncreateAndroid FragmentactivityAndroid Support-Library

Next Solution:

Is there a GUI design app for the Tkinter / grid geometry?

PythonGridTkinter

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDuttsView Question on Stackoverflow
Solution 1 - CssArash MilaniView Answer on Stackoverflow
Solution 2 - CssHarsheetView Answer on Stackoverflow
Solution 3 - CssDerek 朕會功夫View Answer on Stackoverflow
Solution 4 - Cssdefau1tView Answer on Stackoverflow