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

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

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


当前回答

如果您正在使用 Less 和 Bootstrap 您可以写下:

.user-select(none);

其他回答

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

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

注意事项:

正确的答案是正确的,它阻止你能够选择文本,但是,它不会阻止你能够复制文本,因为我会显示下一对屏幕截图(如2014年11月7日)。

此分類上一篇

此分類上一篇

此分類上一篇

你可以看到,我们无法选择数字,但我们能够复制它们。

测试:Ubuntu,Google Chrome 38.0.2125.111。

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

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

在以前的答案中的解决方案中,选择已停止,但用户仍然认为您可以选择文本,因为路由器仍在变化。

.noselect { cursor: 默认; -webkit-touch-callout: 无; -webkit-user-select: 无; -khtml-user-select: 无; -moz-user-select: 无; -ms-user-select: 无; user-select: 无; } <p> 可选文本. </p> <p class="noselect"> 不可选文本. </p>

这将使您的文本完全平坦,就像它在桌面应用程序中一样。

你可以在Firefox和Safari(Chrome也?)中做到这一点。

::selection { background: transparent; }
::-moz-selection { background: transparent; }