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

Question

对于类似按钮的锚点（例如，问题，标记，用户等）位于Stack Overflow页面的顶部）或标签，是否有一种CSS标准方法来禁用突出显示效果，如果用户意外选择文本？

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

使用CSS是否有符合标准的方法来实现这一目标，如果没有，那么“最佳实践”方法是什么？

Answer 1

更新2017年1月：

根据Can I use，除了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 documentation中找到。

Answer 2

在大多数浏览器中，这可以使用CSS user-select属性originally proposed and then abandoned in 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＆lt; 10和Opera＆lt; 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）中，仍然无法阻止在不可选元素之前和之后开始的选择，而不会使整个文档无法选择。

Answer 3

IE的JavaScript解决方案是

onselectstart="return false;"

Answer 4

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

当然，在不使用Gecko渲染引擎的浏览器中不支持此功能。

没有符合“标准”的快捷方式;使用JavaScript是一种选择。

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

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

Answer 5

如果要禁用除<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;
}

Answer 6

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

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

Answer 7

您可以在Firefox和Safari中使用（Chrome也可以？）

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

Answer 8

WebKit的解决方法：

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

我在CardFlip示例中找到了它。

Answer 9

我喜欢混合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片段，所以你可能想在那里添加一个版本检查。

Answer 10

.hidden:after {
    content: attr(data-txt);
}

<p class="hidden" data-txt="Some text you don't want to be selected"></p>

但这不是最好的方式。

Answer 11

您可以使用 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 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>

Answer 12

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

Answer 13

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

Answer 14

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

Answer 15

<强>工作

CSS：

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

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

Answer 16

-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');

Answer 17

如果您使用Less和Bootstrap，可以写下：

.user-select(none);

Answer 18

除了Mozilla-only属性之外，没有，只有标准CSS（截至目前）无法禁用文本选择。

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

Answer 19

这适用于部分浏览器：

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

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

Answer 20

假设有两个这样的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>

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

前缀需要用于在没有前缀的所有浏览器中支持它，这可能不适用于所有答案。

Answer 21

如果不需要颜色选择，这将非常有用：

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

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

Answer 22

注意：

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

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

经过测试：Ubuntu，Google Chrome 38.0.2125.111。

Answer 23

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

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

Answer 24

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

Answer 25

这不是CSS，但值得一提：

jQuery UI Disable Selection：

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

Answer 26

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

Answer 27

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

正在 How ::selection works on nested elements 中讨论。

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

普通CSS设计

p { color: white;  background: black; }

选择

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

禁止用户选择文字会引发可用性问题。

Answer 28

在没有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/

Answer 29

我从CSS-Tricks网站获悉。

user-select: none;

这也是：

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

Answer 30

轻松完成：

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

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

Answer 31

此突出显示效果是由于名为hover（onMouseHover）的操作引起的。当您将鼠标悬停在任何标签上时，它的颜色将会改变。举个例子说。

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

<!-- CSS CODE -->

.effect:hover{
   color: none;
}

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

Answer 32

尝试使用这个：

::selection {
    background: transparent;
}

如果您希望在特定元素中指定not select，只需将元素类或id放在选择规则之前，例如：

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

Answer 33

目前所有浏览器都支持 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 class="noselect">
  Unselectable
</p>

Answer 34

您可以使用用户选择属性，如下所示..

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

Link for the Detailed Description

Answer 35

if(str.contains("template"))
        {                   
          if(str.contains("unsupported"))
              mailType="unsupported";      
              else
                  if(str.contains("final_result"))                
                      mailType="final_result";            
                  else
                      if(str.contains("process_success"))
                          mailType="Process Success"; 
                      else
                          if(str.contains("receive"))                         
                              mailType="Receive";                         
                          else
                          if(str.contains("sen"))
                              mailType="sent"; 
                          else
                              if(str.contains("welcome"))
                                  mailType="welcome";
                              else
                                  if(str.contains("manual"))
                                     mailType="Manual";                    
        }       
        else                
if(str.contains("properties"))
        {

          if(str.contains("unsupported"))
              mailType="unsupported";      
              else
                  if(str.contains("final_result"))                
                      mailType="final_result";            
                  else
                      if(str.contains("process_success"))
                          mailType="Process Success"; 
                      else
                          if(str.contains("receive"))                         
                              mailType="Receive";                         
                          else
                          if(str.contains("sen"))
                              mailType="sent"; 
                          else
                              if(str.contains("welcome"))
                                  mailType="welcome";
                              else
                                  if(str.contains("manual"))
                                     mailType="Manual";

        }

Answer 36

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

Answer 37

使用might cause issues with Ivy too，您可以执行以下操作：

@item

在HTML标记中：

class Action
  def initialize(customerMoney)
    @money = customerMoney
    @item = [{ name: :milk, price: 2.99 }, { name: :eggs, price: 1.50 }, { name: :bread, price: 2.00 }]
  end

  def CheckPrice(item)
    @item.each do |x|
      return x[:price] if x[:name] == item
    end
  end

  def AddItem(item)
    i = 0
    @item.each do |x|
      if x[:name] == item
        x
      end
    end
  end

  def CheckTotal(basket)
    total = 0
    basket.each do |x|
      total += x[:price]
    end
    puts total
  end
end

myBasket = []
customer = Action.new(20)
myBasket.append(customer.AddItem(:bread))

p myBasket

Answer 38

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

<style> 
    .no_highlighting{
        user-select: none;
    }

    .anchor_without_decoration:hover{
        text-decoration-style: none;
    }
</style>

<a href="#" class="anchor_without_decoration no_highlighting">Anchor text</a>

Answer 39

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

Answer 40

您尝试过吗？

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

Answer 41

我看到了许多详细的答案，但我相信仅编写这行代码就足以完成所需的任务：

*{
    -webkit-user-select: none;
 }

Answer 42

我将各种浏览器CSS选择属性与Internet Explorer所需的不可选标记相结合。 9。

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

Answer 43

更好的是，您可以禁用文字选择。

如果你喜欢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);
}

Answer 44

用于Internet Explorer的基于JavaScript的解决方案是：

onselectstart="return false;"

Answer 45

也许你可以使用这个解决方案：在

之前

＆＃13;

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

＆＃13;

<nav>
	<ul>
	<li><a href="#">Link</a></li>
	<li class="disabled"><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
	</ul>
</nav>

＆＃13;

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

Answer 46

您可能还希望在触摸禁止选择其元素的元素（如按钮）时阻止上下文菜单出现。为此，请将此代码添加到整个页面或仅添加那些按钮元素：

$("body").on("contextmenu",function(e){
    return false;
});

Answer 47

正确的CSS解决方案：

存在一个尚未获得解析器的错误，因此我们可以利用它：

::-moz-selection {
}

::selection {
}

voilà，没有任何高亮显示，而是因为有错误或功能？

Here you have a demo, try to select text!!!

Answer 48

这可能有效

    ::selection {
        color: none;
        background: none;
    }
    /* For Mozilla Firefox */
    ::-moz-selection {
        color: none;
        background: none;
    }

Answer 49

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

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

Answer 50

<script type="text/javascript">

if(typeof document.onselectstart!="undefined"){
document.onselectstart=new Function ("return false");
}
else{
document.onmousedown= new Function ("return false");
document.onmouseup= new Function ("return true");
}
</script>

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

50 个答案:

普通CSS设计

选择

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

正确的CSS解决方案：