css - 如何禁用文本选择突出显示?




user-select (20)

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

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

是否有符合标准的方法来实现CSS,如果没有,什么是“最佳实践”方法?


IE的JavaScript解决方案是

onselectstart="return false;"

WebKit解决方法:

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

我在CardFlip示例中找到了它。


快速黑客更新: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;  /* IE 10+ */
   user-select: none;  /* Likely future */ 
}

正如CSS-Tricks所说,问题是

  • 如果您选择文本周围的元素,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 */   
}

更新2017年1月:

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

所有正确的CSS变体都是:

.noselect {
  -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 */
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

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

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


为了获得我需要的结果,我发现我必须同时使用::selectionuser-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; 
}

你可以在Firefox和Safari中这样做(Chrome也可以?)

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

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

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

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

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

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


在上面的解决方案中,选择停止,但用户仍然认为您可以选择文本,因为光标仍然会改变。 要保持静态,您必须设置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;
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

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


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

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

...所有其他浏览器修复程序。 它可以在Internet Explorer 9或更高版本中使用。


如果你想在除<p>元素之外的所有内容上禁用文本选择,你可以在CSS中执行此操作(注意-moz-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;
}

对于那些在触摸事件的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;
}

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

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

您可以使用CSSJavaScript ,旧的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 class="not-selectable">
  <h1>This is the Heading!</h1>
  <p>And I'm the text, I won't be selected if you select me.</p>
</body>


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

user-select: none;

这也是:

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

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

jsFiddle

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

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


此外,对于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;/*IE*/
}


这适用于某些浏览器:

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

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


.hidden:after {
    content: attr(data-txt);
}
<p class="hidden" data-txt="Some text you don't want to be selected"></p>

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


-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;
}
<div id="foo" unselectable="on" class="unselectable">...</div>
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;
onselectstart="return false;"
::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 class="draggable"></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');






textselection