如何禁用文本选择突出

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

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

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

当前回答

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

2013-12-23 14:05:05

其他回答

尝试将这些行插入CSS并在课堂属性中称为“disHighlight”:

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

2016-08-28 07:13:16

除了Mozilla唯一的属性,不,没有办法用标准CSS(如现在)禁用文本选项。

如果您注意到, Stack Overflow 不会关闭其导航按钮的文本选择,我建议在大多数情况下不这样做,因为它改变正常的选择行为,并使其与用户的期望相矛盾。

2009-05-05 20:38:05

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

2013-12-23 14:05:05

你尝试过吗?

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

2020-09-03 14:14:55

我从CSS-Tricks网站上学到了。

user-select: none;

这也是:

::selection {
    background-color: transparent;
}

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

::webkit-selection {
    background-color: transparent;
}

2016-04-01 11:16:39

如何禁用文本选择突出

推荐文章

最新文章

标签