it-swarm.dev

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

对于像按钮一样起作用的锚点(例如, 问题 标签 用户 等等,在Stack Overflow页面的顶部)或标签,是否有CSS标准方法来禁用如果用户不小心选择了文字,会突出显示效果吗?

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

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

4716
anon

更新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文档

6710
Blowsie

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

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

   /*
     Introduced in IE 10.
     See http://ie.Microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

对于IE <10和Opera <15,您将需要使用您希望不可选择的元素的unselectable属性。您可以使用HTML中的属性进行设置:

<div id="foo" unselectable="on" class="unselectable">...</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)中,仍然无法阻止在不可选元素之前和之后开始的选择而不会使整个文档无法选择。

776
Tim Down

IE的JavaScript解决方案是

onselectstart="return false;"
177
Pekka 웃

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

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

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

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

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

171
X-Istence

如果要在除<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;
}
125
Benjamin Crouzier

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

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

114
ZECTBynmo

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

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

WebKit 的解决方法

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

我在CardFlip示例中找到了它。

75
Alex

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

要使<div class="draggable"></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片段,所以你可能想在那里添加一个版本检查。

67
Tom Auger

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

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

65
Ale

您可以使用 _ css _ JavaScript 为此, 旧的IE浏览器也支持JavaScript way方式,但如果不是您的情况,请使用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>

62
Alireza

此外,对于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*/
}
57
Elad Shechter

工作

CSS:

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

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

46
suraj rawat
-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');
46
Gaurang

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

如果你正在使用 LessBootstrap 你可以写:

.user-select(none);
45
Codler

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

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

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

33
hbw

这适用于 some browsers:

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

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

32
r3wt

假设有两个这样的div

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

<div class="second">
  This is my second div
</div>

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

需要使用前缀来支持所有没有前缀的浏览器,这可能不适用于所有答案。

32
Gaurav Aggarwal

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

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

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

29
karthipan raj

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

onmousedown='return false;' 
onselectstart='return false;'
28
Chase1986

注意:

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

Before we have selected anything

After we have selected

The numbers have been copied

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

测试: UbuntuGoogle Chrome 38.0.2125.111。

28
Luke Madhanga

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

这不是CSS,但值得一提:

jQuery UI禁用选择

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

检查我的解决方案没有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/

21
zgnilec

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

它正在讨论How :: selection适用于嵌套元素

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

普通的CSS设计

p { color: white;  background: black; }

在选择

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

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

21
Suraj Naik

快速黑客更新: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-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 */   
}
15
Kaz

我从 CSS-Tricks website了解到。

user-select: none;

这也是:

::selection{ background-color: transparent;}
::moz-selection{ background-color: transparent;}
::webkit-selection{ background-color: transparent;}
15
Mohammed Javed

轻松完成:

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

或者:

假设你有一个<h1 id="example">Hello, World!</h1>,你需要做的是删除h1的innerHTML:在这种情况下 Hello,World 。然后你将不得不去css并这样做:

#example::before //You can ofc 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.
}

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

11
codeWithMe

尝试使用这个:

::selection {
    background: transparent;
}

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

.ClassNAME::selection {
    background: transparent;
}
#IdNAME::selection {
    background: transparent;
}
10
mustafa-elhelbawy

这种突出效果是由于被称为悬停的动作(onMouseHover)。[。_____。]当你将悬停在任何标签上时,它的颜色将会改变。[。_____。]就这样说。

<div class="menu">
 <ul class="effect">
   <li>Questions </li>
   <li>JOBS </li>
   <li>Users</li>
 </ul>
</div>

<!-- CSS CODE -->

.effect:hover{
   color: none;
}

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

10
Pushp Singh

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

p {  
     -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 */             
   }

详细说明的链接

9
Chirag Dave
 -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
9
Hetal Rupareliya

如果要禁用整个页面的选择和突出显示,可以使用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 */
  }
8
jasonleonhard

使用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>

6
Abrar Jahin

更好的是,您可以禁用文本选择。

如果您喜欢SASS(SCSS),并且您不想使用指南针,则可以执行此操作

styles.scss

@mixin user-select($select) {
  -webkit-touch-callout:#{$select};
  @each $pre in -webkit-, -moz-, -ms-, -o-, -khtml- {
  #{$pre + user-select}: #{$select};
  } 
  #{user-select}: #{$select};
}

.no-select {
  @include user-select(none);
}
4
Yevgeniy Afanasyev

我将各种浏览器css与IE <9所需的不可选标记相结合。

<style>
[unselectable="on"] {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}
</style>
<div unselectable="on">Unselectable Text</div>
4
omikes

也许你可以使用这个解决方案:之前

nav li {
	display: inline-block;
	position: relative;
}

nav li a {
	display: inline-block;
	padding: 10px 20px;
}

nav li a:hover {
	color: red;
}

nav li.disabled:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
<nav>
	<ul>
	<li><a href="#">Link</a></li>
	<li class="disabled"><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
	</ul>
</nav>

JsFiddle - https://jsfiddle.net/grinmax_/9L1cckxu/

1
grinmax

:: selection {background:transparent;颜色:透明;}

:: - moz-selection {background:transparent;颜色:透明;}

0
Navneet Kumar