对于像按钮一样运作的插槽(例如,这个 Stack Overflow 页面侧栏上的按钮题为 问题、标签和用户)或选项卡,如果用户随机选择文本,则是否有 CSS 标准方式禁用突出效果?
我意识到可以用JavaScript做到这一点,而谷歌有点带来了Mozilla-only -moz-user-select选项。
有没有一个符合标准的方式来实现这一点与CSS,如果没有,什么是“最好的实践”方法?
当前回答
对于 Internet Explorer 的 JavaScript 解决方案是:
onselectstart="return false;"
其他回答
直到 CSS 3 的用户选择属性成为可用的,基于 Gecko 的浏览器支持您已经发现的 -moz-用户选择属性. WebKit 和 Blink 的浏览器支持 -webkit-用户选择属性。
当然,这在不使用 Gecko 发射引擎的浏览器中不支持。
没有“标准”符合的快速和简单的方式来做到这一点;使用JavaScript是一个选项。
真正的问题是,为什么你想用户无法突出并假设复制和粘贴某些元素?我没有遇到一个时候,我不想让用户突出我的网站的一部分。
唯一的地方我可以看到这是有用的,如果你有表单的按钮不应该复制和保留,如果一个用户复制和保留网站。
对于 Internet Explorer 此外,您还需要添加 pseudo class focus (.ClassName:focus) 和 outline-style: none。
.ClassName,
.ClassName:focus {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline-style: none; /* Internet Explorer */
}
对于那些在 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;
}
快速黑客更新
如果您使用所有 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 */
}
与CSS-
div { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -o-user-select: none; "unselectable='on' onselectstart="return false;" onmousedown="return false; } <div> Blabla <br/> 更多 Blabla <br/> 更多 Blabla... </div>
