对于像按钮一样运作的插槽(例如,这个 Stack Overflow 页面侧栏上的按钮题为 问题、标签和用户)或选项卡,如果用户随机选择文本,则是否有 CSS 标准方式禁用突出效果?
我意识到可以用JavaScript做到这一点,而谷歌有点带来了Mozilla-only -moz-user-select选项。
有没有一个符合标准的方式来实现这一点与CSS,如果没有,什么是“最好的实践”方法?
当前回答
关于 WebKit 的文章:
/* Disable tap highlighting */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
我在 CardFlip 例子中发现了它。
其他回答
对于那些在 Android 浏览器中与触摸事件取得相同的困难的人,请使用:
html, body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
}
我看到很多详细的答案,但我认为写这个代码线应该足以完成所需的任务:
*{
-webkit-user-select: none;
}
您可以使用 CSS 或 JavaScript。
JavaScript 模式支持较旧的浏览器,如旧版本的 Internet Explorer 也,但如果不是你的情况,使用 CSS 模式,然后:
HTML 和 JavaScript:
<html onselectstart='return false;'> <body> <h1> 这是标题!</h1> <p> 我是文本,如果你选择我,我不会被选中。
HTML / CSS:
.not-selectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } <body class="not-selectable"> <h1>This is the Heading!</h1> <p>And I'm the text, I won't be selected if you select me.</p> </body>
快速黑客更新
如果您使用所有 CSS 用户选择的属性(包括浏览器预定),则仍然存在一个问题。
.div {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* Internet Explorer 10+ */
user-select: none; /* Likely future */
}
正如CSS-Tricks所说,问题是:
WebKit 仍然允许文本复制,如果您选择周围的元素。
您也可以使用下面的一个,以确保一个完整的元素被选中,这意味着如果您点击一个元素,所有包含在该元素的文本将被选中。
.force-select {
-webkit-user-select: all; /* Chrome 49+ */
-moz-user-select: all; /* Firefox 43+ */
-ms-user-select: all; /* No support yet */
user-select: all; /* Likely future */
}
对于 Internet Explorer 的 JavaScript 解决方案是:
onselectstart="return false;"
