对于像按钮一样运作的插槽(例如,这个 Stack Overflow 页面侧栏上的按钮题为 问题、标签和用户)或选项卡,如果用户随机选择文本,则是否有 CSS 标准方式禁用突出效果?

我意识到可以用JavaScript做到这一点,而谷歌有点带来了Mozilla-only -moz-user-select选项。

有没有一个符合标准的方式来实现这一点与CSS,如果没有,什么是“最好的实践”方法?


当前回答

将此添加到您想要禁用文本选项的第一个 div 中:

onmousedown='return false;' 
onselectstart='return false;'

其他回答

你尝试过吗?

.disableSelect{
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -o-user-select: none;
    -moz-user-select: none;

    pointer-events:none;
}

.hidden:after { 内容: attr(data-txt); } <p class="hidden" data-txt="某些文本你不想被选中"></p>

然而,这不是最好的方式。

直到 CSS 3 的用户选择属性成为可用的,基于 Gecko 的浏览器支持您已经发现的 -moz-用户选择属性. WebKit 和 Blink 的浏览器支持 -webkit-用户选择属性。

当然,这在不使用 Gecko 发射引擎的浏览器中不支持。

没有“标准”符合的快速和简单的方式来做到这一点;使用JavaScript是一个选项。

真正的问题是,为什么你想用户无法突出并假设复制和粘贴某些元素?我没有遇到一个时候,我不想让用户突出我的网站的一部分。

唯一的地方我可以看到这是有用的,如果你有表单的按钮不应该复制和保留,如果一个用户复制和保留网站。

将此添加到您想要禁用文本选项的第一个 div 中:

onmousedown='return false;' 
onselectstart='return false;'

对于 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  */
}