首页 文章

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

提问于
浏览 次
4513

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

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

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

css cross-browser highlighting textselection

30 回答

  • 6579

    UPDATE January, 2017:

    根据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>

    请注意，它是 non-standard feature （即不是任何规范的一部分） . 它不能保证在任何地方都可以工作，并且浏览器之间的实现可能存在差异，并且将来的浏览器可能会失去对它的支持 .

    更多信息可以在Mozilla Developer Network documentation找到 .

    回复于
  • 124

    尝试使用这个：

    ::selection {
    background: transparent;
}

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

    .ClassNAME::selection {
    background: transparent;
}
#IdNAME::selection {
    background: transparent;
}
    回复于
  • 101

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

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

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

    回复于
  • 75

    在大多数浏览器中，这可以使用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 <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"));

    Update 30 April 2014 ：只要向树中添加新元素，就需要重新运行这个树遍历，但是@Han的注释似乎可以通过添加 mousedown 事件处理程序来避免这种情况，该处理程序在目标上设置 unselectable 事件 . 有关详细信息，请参阅http://jsbin.com/yagekiji/1 .

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

    回复于
  • 66

    这适用于某些浏览器：

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

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

    回复于
  • 46
    -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
    回复于
  • 23

    如果要在除 <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;
}
    回复于
  • 63

    我从CSS-Tricks网站上了解到 .

    user-select: none;

    这也是：

    ::selection{ background-color: transparent;}
::moz-selection{ background-color: transparent;}
::webkit-selection{ background-color: transparent;}
    回复于
  • 57

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

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

    回复于
  • 15

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

    onmousedown='return false;' 
onselectstart='return false;'
    回复于
  • 31

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

    .user-select(none);
    回复于
  • 10

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

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

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

    回复于
  • 59

    Working

    CSS：

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

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

    回复于
  • 167

    Quick hack update: March 2017 -from 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 */   
}
    回复于
  • 47
    .hidden:after {
    content: attr(data-txt);
}

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

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

    回复于
  • 46

    这不是CSS，但值得一提：

    jQuery UI Disable Selection：

    $("your.selector").disableSelection();
    回复于
  • 44

    WebKit的解决方法：

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

    我在CardFlip示例中找到了它 .

    回复于
  • 32

    IE的JavaScript解决方案是

    onselectstart="return false;"
    回复于
  • 28
    -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');
    回复于
  • 27

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

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

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

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

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

    回复于
  • 27

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

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

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

    它正在_171206中进行讨论 .

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

    普通CSS设计

    p { color: white;  background: black; }

    选择

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

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

    回复于
  • 10

    此外，对于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;/*IE*/
}
    回复于
  • 170

    你可以在Firefox和Safari中这样做（Chrome也可以？）

    ::selection { background: transparent; }
::-moz-selection { background: transparent; }
    回复于
  • 21

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

    回复于
  • 111

    您可以使用 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>
    回复于
  • 33

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

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

    回复于
  • 13

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

    回复于
  • 760

    NOTE:

    正确的答案是正确的，因为它阻止您能够选择文本 . 但是，它不会阻止您复制文本，因为我将使用下面的两个屏幕截图显示（截至2014年11月7日） .

    Before we have selected anything

    After we have selected

    The numbers have been copied

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

    经测试：Ubuntu，Google Chrome 38.0.2125.111 .

    回复于

相关问题