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
How to remove the default button highlighting in Safari when using jQuery
提问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 演示页面上。
Under Firefox on my same machine it looks like this
在我同一台机器上的 Firefox 下,它看起来像这样
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:none
for their css. in your case it's a button
element. 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/
回答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;}