如何禁用文本选择突出显示？

牛青 • • 问答 • 139 阅读

对于像按钮一样的锚点(例如,Stack Overflow页面顶部的问题,标签,用户等)或标签,如果用户意外选择了文本,是否有一种CSS标准方法来禁用突出显示效果？

我意识到这可以通过JavaScript来完成,并且有点谷歌搜索产生了仅Mozilla -moz-user-select选项.

是否有符合标准的方法来实现CSS,如果没有,那么"最佳实践"方法是什么？

回答

更新2017年1月:

根据我可以使用,user-select除了Internet Explorer 9和早期版本之外,所有浏览器目前都支持(但遗憾的是仍然需要供应商前缀).

所有正确的CSS变体都是:

.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Opera and Firefox */
}
<p>
Selectable text.
</p>
<p>
Unselectable text.
</p>
<p>
Selectable text.
</p>
<p>
Unselectable text.
</p>

请注意,它是非标准功能(即不是任何规范的一部分).它不能保证在任何地方都可以工作,并且浏览器之间的实现可能存在差异,并且在将来的浏览器中可能会失去对它的支持.

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

  • 这是荒唐的!这么多不同的方法来做同样的事情.让我们为用户选择制定新标准.我们称之为`standard-user-select`.那我们就不会有这些问题.虽然为了向后兼容,我们也应该包括其他人.所以现在代码变成`-webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; standard-user-select:none;`.啊,好多了.
  • 'user-select'-值:无| 文字| 切换| 元素| 元素| 所有| 继承 - http://www.w3.org/TR/2000/WD-css3-userint-20000216
  • 很好的代码molokoloco:D,虽然我个人会远离使用它,因为有时你可能需要不同的浏览器不同的值,它依赖于JavaScript.创建一个类并将其添加到您的元素或将css应用于样式表中的元素类型是相当有力的证明.
  • 实际上在Opera中没有实现-o-user-select.它实现了IE的不可选属性.
  • 出于某种原因,这个单独在IE8中没有工作,然后我将`<div onselectstart ="返回false;">`添加到我的主div中.
  • 浏览器特定前缀的争论已经持续了很长时间.这里不是讨论它的正确场所.当你可以称之为`user-select`时,为什么还要打扰它叫`standard-user-select`.目前,解决这些差异的最佳方法是以较少或类似的方式构建mixins.
  • @Claudiu:前缀版本没有收敛于标准的`user-select`属性的原因是[用户选择]出现在[早期CSS 3草案]中(http://www.w3.org/TR/2000)/WD-css3-userint-20000216#user-select)但后来被删除了,大概是因为它被认为更关注行为而不是样式,因此超出了CSS的范围.
  • 我已经创建了一个自动检测CSS前缀的函数;)http://www.b2bweb.fr/molokoloco/js-cssprefix/
  • `-moz-user-select:moz-none;`规则在最新的Firefox 22中不起作用,请用正确的值修复它:`-moz-user-select:none;`(在这里用它:http: //jsfiddle.net/jdNa9/3/)谢谢.
  • 我建议添加`cursor:default;`来表示对用户的可选择性
  • `-moz-user-select`应该设置为`-moz-none`或者你不能重置firefox中子元素的用户选择.
  • @SlavaFominII:对.是的,Opera没有实现专有的`user-select` CSS属性.
  • 正如之前评论中提到的那样 - "标准如何扩散" - https://xkcd.com/927/

在大多数浏览器中,这可以使用CSS user-select属性的专有变体来实现,最初提出然后在CSS3中放弃,现在在CSS UI Level 4中提出:

*.unselectable {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
/*
Introduced in Internet Explorer 10.
See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
*/
-ms-user-select: none;
user-select: none;
}

对于IE <10和Opera <15,您将需要使用unselec

<div unselectable="on">...</div>

table您希望不可选择的元素的属性.您可以使用HTML中的属性进行设置:

<div unselectable="on">...</div>

遗憾的是,这个属性不是继承的,这意味着你必须在一个内部的每个元素的开始标记中放置一个属性<div>.如果这是一个问题,您可以使用JavaScript以递归方式为元素的后代执行此操作:

function makeUnselectable(node) {
if (node.nodeType == 1) {
node.setAttribute("unselectable", "on");
}
var child = node.firstChild;
while (child) {
makeUnselectable(child);
child = child.nextSibling;
}
}
makeUnselectable(document.getElementById("foo"));

更新2014年4月30日:每当向树添加新元素时,都需要重新运行此树遍历,但是@Han的评论似乎可以通过添加在目标mousedown上设置的事件处理程序来避免这种情况.unselectable这件事.有关详细信息,请参见http://jsbin.com/yagekiji/1.

这仍然没有涵盖所有可能性.虽然不可能在不可选择的元素中启动选择,但在某些浏览器(例如IE和Firefox)中,仍然无法阻止在不可选元素之前和之后开始的选择而不会使整个文档无法选择.

  • @Blowsie:我不这么认为:CSS 2规范说`*.foo`和`.foo`是完全等价的(在第二种情况下,通用选择器(`*`)是隐含的),所以禁止浏览器怪癖,我看不出包含"*"会损害性能.我的长期习惯是包含`*`,我最初开始这样做是为了提高可读性:它明确地说明了作者打算匹配所有元素.
  • 经过一些进一步的阅读后,似乎*在使用它作为关键(最右边的选择器),即不可选择的*时,效率是不合理的.更多信息,请访问http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors
  • 你应该从你的例子中删除*选择器,它真的没有效率,并且真的没有需要在你的例子中使用它吗？
  • 而不是使用class ="unselectable",只需使用属性选择器[unselectable ="on"] {...}
  • @Francisc:没有.正如我在评论中早些时候对Blowsie说的那样,它确实没有区别.
  • @Francisc:它没有或多或少具体.阅读规范:如果省略则暗示`*`.我解释了我在评论中早些时候将其包括在内的原因,即我发现它在过去有用,明确地提醒自己我打算匹配所有元素.我当然不是说每个人都应该这样做.同样,它没有任何积极的伤害.
  • 你能详细说明"提议但现在已经不存在"吗？
  • @Kos:该链接是针对CSS 3的一部分提案2000年的古老草案,"CSS3的用户界面".我相信这个规范被[CSS3 UI规范](http://www.w3.org/TR/css3-ui/)所取代,它没有提到`user-select`.我想有一些邮件列表档案,其中包含有关在网络上某处删除它的讨论,但我无法找到它们.
  • "unselectable"属性似乎在IE 9中不起作用
  • 请删除`*`选择器.
  • 一个元素总是匹配`*`毫无疑问.尝试匹配它只会浪费浏览器的时间,无论它是否存在,因此将其放置在那里的选择基本上是纯粹的风格,并且取决于作者的品味.就此而言,无论如何都要辩论这一切是什么意思？
  • @beanland:我现在已经在IE 9中测试了`unselectable`属性,它运行正常.
  • @beanland:原来你是对的:只在标准模式下,你需

    onselectstart="return false;"

    要在IE 9中使用`setAttribute("unselectable","on")`我已经更新了我的答案.

IE的JavaScript解决方案是

onselectstart="return false;"
  • 不要忘记`ondragstart`!
  • @Abudayah因为它们不适用于旧版本的Internet Explorer？就像这个答案的全部要点一样.
  • 还有一件事.如果将其添加到正文中,则无法在textareas中选择文本或在IE中输入字段.我为IE修复它的方式.`body.onselectstart = function(e){if(e.target.nodeName!="INPUT"&& e.target.nodeName!="TEXTAREA"){e.preventDefault(); 返回false; } return true; }`
  • 这可以使用jQuery添加为属性 - $("p").attr("onselectstart","return false")这是我在IE8中唯一可靠的方法

在CSS 3的用户选择属性可用之前,基于Gecko的浏览器支持-moz-user-select您已找到的属性.基于WebKit和Blink的浏览器支持该-webkit-user-select属性.

当然,在不使用Gecko渲染引擎的浏览器中不支持这一点.

没有符合"标准"的快速简便的方法; 使用JavaScript是一种选择.

真正的问题是,为什么您希望用户无法突出显示并可能复制和粘贴某些元素？我没有遇到过一次我不想让用户突出显示我网站的某个部分.我的几个朋友在花了很多时间阅读和编写代码之后,会使用突出显示功能来记住他们在页面上的位置,或提供一个标记,以便他们的眼睛知道下一步要看哪里.

我唯一能看到它有用的地方是,如果用户复制并粘贴网站,那么表格的按钮不应复制和粘贴.

  • 需要的另一个原因是按住Shift键单击以选择网格或表格中的多个行.您不希望突出显示文本,您希望它选择行.
  • 高度互动的网络应用程序,有很多拖放...意外突出显示是一个很大的可用性问题.
  • 按钮的东西正是我的动力.
  • 还存在法律问题,其他人的内容正在合法重新发布,但许可中的条款要求网络发布者阻止文本被轻易复制和粘贴.这就是我找到这个问题的原因.我不同意这个要求,但我签约的公司在法律上有义务以这种方式实施.
  • @CraigM css样式不会阻止某人抓取HTML源并复制它.如果您想保护自己的内容,就必须找到更好的方法.
  • 如果您尝试制作与触摸兼容的网络应用并且您不希望用户意外地使用点击拖动功能,该怎么办？

如果要在除<p>元素之外的所有内容上禁用文本选择,可以在CSS中执行此操作(注意-moz-none哪些允许覆盖子元素,这在其他浏览器中允许none):

* {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-o-user-select: none;
user-select: none;
}
p {
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-o-user-select: text;
user-select: text;
}
  • 确保你也可以选择输入字段:`p,input {-webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -o-user-select:text; user-select:text; }`
  • 关于除了一个项目之外的所有代码关闭浏览器UI期望时要非常谨慎.例如,列表项<li />文本怎么样？
  • 为此你可以分别添加cursor:default和cursor:text:)

在上面的解决方案中,选择停止,但用户仍然认为您可以选择文本,因为光标仍然会改变.要保持静态,您必须设置CSS光标:

.noselect {
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

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

  • 惊讶地发现Firefox在2019年仍然需要​​供应商前缀。我无视地只使用了“ user-select：none;”，以为该标准现在会被采用，但可惜它没有被采用。让您想知道标准委员会上的人们仍在争论什么。“不，你们……我*真的*认为应该是用户选择的：不能；因为它更具描述性，您知道吗？” “我们已经解决了这个问题，迈克。我们必须省略撇号，这是不好的形式！” “足够了，每个人！我们将在下个月再次讨论这个问题。标准委员会会议休会！”

您可以在Firefox和Safari中执行此操作(Chrome也可以？)

::selection { background: transparent; }
::-moz-selection { background: transparent; }
  • 我不建议这样做,因为它实际上并没有解决问题; 禁用文本选择 - 它只是隐藏它.这可能会导致可用性不佳,因为如果我将光标拖到页面上,我可能会在不知情的情况下选择任意文本.这可能会导致各种奇怪的可用性"错误".
  • 不适用于具有透明区域的 PNG 图像：将始终选择浅蓝色......有任何解决方法吗？

WebKit的解决方法:

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

我在CardFlip示例中找到了它.

我喜欢混合CSS + jQuery解决方案.

要使所有元素都无法<div></div>选择,请使用此CSS:

.draggable {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;
}
.draggable input {
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-o-user-select: text;
user-select: text;
}

然后,如果您正在使用jQuery,请在$(document).ready()块中添加:

if (($.browser.msie && $.browser.version < 10) || $.browser.opera) $('.draggable').find(':not(input)').attr('unselectable', 'on');

我想你仍然希望任何输入元素可以交互,因此:not()伪选择器.'*'如果你不在乎,你可以使用.

警告:IE9可能不需要这个额外的jQuery片段,所以你可能想在那里添加一个版本检查.

  • @ mhenry1384`jQuery.browser`从版本1.3开始已被弃用,已在1.9版本中删除 - http://api.jquery.com/jQuery.browser
  • 使用-ms-user-select:none; (对于IE10)和你的jQuery"if"应该是这样的:if(($ .browser.msie && $ .browser.version <10)|| $ .browser.opera) 
.hidden:after {
content: attr(data-txt);
}
<p></p>

不过,这不是最好的方式.

  • 这是一个非常有创意的解决方案 特别是如果它使用title属性,因为这可能对屏幕阅读器更好.
  • 我试了一下([JSBin](http://jsbin.com/fawip/1/edit?html,css,output))它在IE中不起作用.不幸的是,旧的IE是唯一一个"用户选择"不起作用的IE.
  • 您也可以使用`title`作为属性。

您可以使用CSS或JavaScript,旧的IE浏览器也支持JavaScript方式,但如果不是您的情况,请使用CSS方式:

HTML/JavaScript的: 

<html onselectstart='return false;'>
<body>
<h1>This is the Heading!</h1>
<p>And I'm the text, I won't be selected if you select me.</p>
</body>
</html>

HTML/CSS:

.not-selectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<body>
<h1>This is the Heading!</h1>
<p>And I'm the text, I won't be selected if you select me.</p>
</body>

此外,对于Internet Explorer,您需要添加伪类焦点(.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  */
}
  • 只要在具有`className`类的元素上开始选择,这在IE中就可以工作.见[JSBin](http://jsbin.com/careye/1/edit?html,css,output).

尝试将此行插入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;
}

使用SASS（SCSS 语法）

您可以使用mixin执行此操作：

// Disable selection
@mixin disable-selection {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none;   /* Safari */
-khtml-user-select: none;    /* Konqueror HTML */
-moz-user-select: none;      /* Firefox */
-ms-user-select: none;       /* Internet Explorer/Edge */
user-select: none;           /* Non-prefixed version, currently supported by Chrome and Opera */
}
// No selectable element
.no-selectable {
@include disable-selection;
}

在 HTML 标签中：

<div>TRY TO HIGHLIGHT</div>

在这个CodePen 中尝试一下。

如果您使用autoprefixer，您可以删除其他前缀。

浏览器兼容性在这里。

快速黑客更新:2017年3月 - 来自CSS-Tricks

如果你为所有CSS用户选择属性设置值'none',如下所示,那么仍然存在一个问题.

.div {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none;    /* Firefox all             */
-ms-user-select: none;     /* Internet Explorer  10+  */
user-select: none;        /* Likely future           */
}

正如CSS-Trick所说,问题是

  • 如果您选择文本周围的元素,WebKit仍然允许复制文本.

因此,您也可以使用下面的一个来强制选择整个元素,这是问题的解决方案.您所要做的就是将值"none"更改为"all",如下所示

.force-select {
-webkit-user-select: all;  /* Chrome 49+     */
-moz-user-select: all;     /* Firefox 43+    */
-ms-user-select: all;      /* No support yet */
user-select: all;          /* Likely future  */
}

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
*.unselectable {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}

function makeUnselectable(node) {
if (node.nodeType == 1) {
node.unselectable = true;
}
var child = node.firstChild;
while (child) {
makeUnselectable(child);
child = child.nextSibling;
}
}
makeUnselectable(document.getElementById("foo"));

-webkit-user-select: none;
-moz-user-select: none;

::selection {
background: transparent;
}
::-moz-selection {
background: transparent;
}
* {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-o-user-select: none;
user-select: none;
}
p {
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-o-user-select: text;
user-select: text;
}

<div></div>

.draggable {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
.draggable input {
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-o-user-select: text;
user-select: text;
}

if ($.browser.msie)
$('.draggable').find(':not(input)').attr('unselectable', 'on');

工作

CSS:

-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;

这应该可行,但它不适用于旧浏览器.存在浏览器兼容性问题.

对于那些在触摸事件的Android浏览器中无法实现相同功能的用户,请使用:

html, body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
}

如果您使用Less和Bootstrap,您可以写:

.user-select(none);

除了Mozilla-only属性之外,没有办法只使用标准CSS(截至目前)禁用文本选择.

如果您注意到,Stack Overflow不会禁用其导航按钮的文本选择,我建议不要在大多数情况下这样做,因为它会修改正常的选择行为并使其与用户的期望发生冲突.

  • 如果您从聊天线程中选择一组注释,并且每个注释旁边都有一个upvote/downvote按钮,那么选择没有其他内容的文本会很不错.这就是用户期望或想要的.他不想在每条评论中复制/粘贴按钮标签.
  • 如果您例如双击一个按钮而不是将您重定向到另一个页面会打开一个div怎么办？然后由于双击,将选择按钮的文本!

这适用于某些浏览器:

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

只需在逗号分隔的选择器前面添加所需的元素/ ID,不要有空格,如下所示:

h1::selection,h2::selection,h3::selection,p::selection{ background-color: transparent;}
h1::moz-selection,h2::moz-selection,h3::moz-selection,p::moz-selection{ background-color: transparent;}
h1::webkit-selection,h2::webkit-selection,h3::webkit-selection,p::webkit-selection{ background-color: transparent;}

其他答案更好; 这应该被视为最后的手段/收获.

  • 很少有事情可以肯定,但这个解决方案肯定不适用于*all*浏览器.

假设有两个这样的div

.second {
cursor: default;
user-select: none;
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
-webkit-touch-callout: none;
/* iOS Safari */
}
<div>
This is my first div
</div>
<div>
This is my second div
</div>

将光标设置为默认值,以便为用户提供无法选择的感觉/

如果不需要颜色选择,这将非常有用:

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

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

将其添加到要禁用文本选择的第一个div:

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

注意:

正确答案是正确的,因为它会阻止您选择文本.但是,它并不会阻止您复制文本,因为我将在接下来的几个屏幕截图中显示(截至2014年11月7日).

如您所见,我们无法选择数字,但我们能够复制它们.

测试:Ubuntu,谷歌浏览器 38.0.2125.111.

为了得到我需要的结果,我发现我必须同时使用::selection和user-select

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

这不是CSS,但值得一提:

jQuery UI禁用选择:

$("your.selector").disableSelection();

检查我的解决方案没有JavaScript:

的jsfiddle

li:hover {
background-color: silver;
}
#id1:before {
content: "File";
}
#id2:before {
content: "Edit";
}
#id3:before {
content: "View";
}
<ul>
<li><a href="https://qa.1r1g.com/sf/ask/57874771/www.w1.com"></a>
<li><a href="https://qa.1r1g.com/sf/ask/57874771/www.w2.com"></a>
<li><a href="https://qa.1r1g.com/sf/ask/57874771/www.w3.com"></a>
</ul>

应用我的技术的弹出菜单:http://jsfiddle.net/y4Lac/2/

虽然这个伪元素在CSS选择器级别3的草稿中,但它在候选推荐阶段被删除,因为它的行为似乎不明确,特别是对于嵌套元素,并且没有实现互操作性.

它正在How :: selection在嵌套元素上进行讨论.

尽管它是在浏览器中实现的,但您可以通过在选项卡设计(在您的情况下)中使用相同的颜色和背景颜色来模糊未选择的文本.

普通的CSS设计

p { color: white;  background: black; }

在选择

p::-moz-selection { color: white;  background: black; }
p::selection      { color: white;  background: black; }

禁止用户选择文本会增加可用性问题.

我从CSS-Tricks网站上学到了很多东西.

user-select: none;

这也是:

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

轻松完成:

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

或者:

假设你有一个<h1>Hello, World!</h1>,你需要做的是删除那个的innerHTML h1:在这种情况下你好,世界.然后你将不得不去css并这样做:

#example::before // You can of course use **::after** as well.
{
content: 'Hello, World!'; // Both single-quotes and double-quotes can be used here.
display: block; // To make sure it works fine in every browser.
}

现在它只是认为它是一个块元素,而不是文本.

在user-select目前支持在所有浏览器。

这些是所有可用的正确 CSS 变体：

.noselect {
-webkit-user-select: none;    /* Safari */
-webkit-touch-callout: none;  /* iOS Safari */
-khtml-user-select: none;     /* Konqueror HTML */
-ms-user-select: none;        /* Internet Explorer/Edge */
-moz-user-select: none;       /* Old versions of Firefox */
user-select: none;           /* Non-prefixed version*/
}
<p>
Selectable
</p>
<p>
Unselectable
</p>

尝试使用这个:

::selection {
background: transparent;
}

如果您希望指定不在特定元素内部选择,只需将元素类或id放在选择规则之前,例如:

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

如果要禁用整个页面的选择和突出显示,可以使用css轻松完成此操作

* {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

这种突出显示效果是由于名为hover(onMouseHover)的操作引起的.当您将鼠标悬停在任何标签上时,它的颜色将会改变.举个例子说.

<div>
<ul>
<li>Questions</li>
<li>JOBS</li>
<li>Users</li>
</ul>
</div>

如果你想突出显示它,你可以给任何颜色,否则你不能给它.

  • 不,你在说什么是悬停,这意味着"当鼠标悬停在文本上时".它与"选择文本"不同.默认情况下,悬停时没有颜色.

你可以使用用户选择属性,如下所示..

p {
-webkit-user-select: none;  /* Chrome all and Safari all */
-moz-user-select: none;     /* Firefox all */
-ms-user-select: none;      /* Internet Explorer 10 and later */
user-select: none;          /* Likely future */
}

链接详细说明

向您的 CSS 添加一个类，该类定义您不能选择或突出显示元素。我有一个例子：

<style>
.no_highlighting{
user-select: none;
}
.anchor_without_decoration:hover{
text-decoration-style: none;
}
</style>
<a href="#">Anchor text</a>

使用CSS-

div {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-o-user-select: none;
"unselectable='on' onselectstart="return false;"
onmousedown="return false;
}
<div>
Blabla
<br/> More Blabla
<br/> More Blabla...
</div>

你试过这个吗？

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

感兴趣的话，可以再看看这几篇文章：

  1. H5生成海报在ios上长按时出现光标如何去除
  2. 使用CSS里的user-select属性控制用户在页面上选中的内容
  3. CSS选中状态修改，谷歌滚动轴修改
以上是如何禁用文本选择突出显示？的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>