CSS 使用 jQuery 时如何删除 Safari 中突出显示的默认按钮

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14098735/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 21:09:12  来源:igfitidea点击:

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

cssjquery-ui

提问by Dutts

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.

我注意到在 OS X 上的 Safari 下,我的默认 jQuery 按钮周围似乎有一个蓝色发光高光。刚刚检查,同样的事情发生在jQuery UI 演示页面上

Default button highlighting under Safari

Safari 下的默认按钮高亮显示

Under Firefox on my same machine it looks like this

在我同一台机器上的 Firefox 下,它看起来像这样

enter image description here

在此处输入图片说明

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

谁能告诉我我可以做些什么来在 Safari 下删除它?我仍然喜欢默认行为。

回答by Arash Milani

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

要删除任何浏览器可能作为默认操作应用的任何输入突出显示,您始终可以outline:none将其用于其 css。在你的情况下,它是一个button元素。所以这应该有效:

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)

虽然不建议删除 CSS 大纲。因为它不利于可访问性。(感谢 Robin Clowers 提到这一点)

回答by Harsheet

Try using this

尝试使用这个

In CSS :

在 CSS 中:

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

In Javascript :

在 JavaScript 中:

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

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

回答by u283863

*{
    outline: none;
}

.blah{
    outline-color: blue;
}

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

这不会影响现有的。( .blah) 这也适用于 Google Chrome。

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

现场演示:http ://jsfiddle.net/DerekL/TUbjc/

回答by defau1t

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:

这个按钮实际上定义了一个轮廓属性。你必须覆盖它。如果您在 Firebug 中检查它,您将看到此按钮的以下 CSS 声明:

.ui-dialog .ui-dialog-buttonpane button{outline:none;}