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

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

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


当前回答

你尝试过吗?

.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;
}

其他回答

试着使用这个:

::selection {
    background: transparent;
}

如果您想指定不在特定元素中选择,则只需在选择规则之前设置元素类或ID,例如:

.ClassNAME::selection {
    background: transparent;
}
#IdNAME::selection {
    background: transparent;
}

你也可能想防止背景菜单出现,当触摸的元素,如按钮,他们的选择被阻止,这样做,添加这个代码到整个页面,或者只是这些按钮元素:

$("body").on("contextmenu",function(e){
    return false;
});

这将是有用的,如果颜色选择也不需要:

::-moz-selection { background:none; color:none; }
::selection { background:none; color:none; }

...所有其他浏览器修复. 它将在 Internet Explorer 9 或更高版本中运行。

更新2017年1月:

根据我可以使用,用户选择 + -webkit 用户选择为 Safari 足以实现所有主要浏览器所需的行为。


以下是所有可用的正确的CSS变量:

.noselect { _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _


请注意,用户选择正在标准化过程中(目前在W3C工作草案中)。它不保证到处工作,浏览器之间可能存在实施差异。


更多信息可在 Mozilla Developer Network 文档中找到。

这个属性的价值是无,文本,条形,元素,元素,所有和继承。

要得到我需要的结果,我发现我不得不使用:选择和用户选择

input.no-select:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input.no-select::selection {
    background: transparent;
}

input.no-select::-moz-selection {
    background: transparent;
}