如何禁用文本选择突出

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

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

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

当前回答

第一個方法:(完全無情):

.no-select::selection, .no-select *::selection {
  background-color: Transparent;
}

.no-select { /* Sometimes I add this too. */
  cursor: default;
}

<span>RixTheTyrunt is da best!</span>
<br>
<span class="no-select">RixTheTyrunt is da best!</span>

狙击:

.no-select::selection,.no-select *::selection {背景颜色:透明; }.no-select { /* 有时我也添加了这个。 */ cursor:默认; } RixTheTyrunt是最好的! RixTheTyrunt是最好的!

第二种方法(不含)

.no-select {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

狙击:

.no-select { 用户选择: 无; -moz-用户选择: 无; -webkit-用户选择: 无; } RixTheTyrunt 是最好的! RixTheTyrunt 是最好的!

首先,解决问题,然后写代码,约翰·约翰逊

2021-11-27 11:52:38

其他回答

对于 Internet Explorer 的 JavaScript 解决方案是:

onselectstart="return false;"

2009-11-13 16:05:58

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

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

2015-05-14 00:13:18

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

.noselect { cursor: 默认; -webkit-touch-callout: 无; -webkit-user-select: 无; -khtml-user-select: 无; -moz-user-select: 无; -ms-user-select: 无; user-select: 无; } 可选文本. 不可选文本.

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

2015-08-30 18:32:57

关于 WebKit 的文章:

/* Disable tap highlighting */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

我在 CardFlip 例子中发现了它。

2011-09-21 07:09:59