Question

这是一个有趣的CSS问题给你！

我有一个透明背景的textarea覆盖了一些TEXT，我想用它作为一种水印。文本很大，占据了textarea的大部分。它看起来不错，问题是当用户点击textarea时，它有时会选择水印文本。我希望水印文本永远不会被选中。我期待如果z-index中的某些内容较低，则无法选择，但浏览器在选择项目时似乎并不关心z-index层。是否有一种技巧或方法可以使DIV永远不可选择？

Answer 1

我写了一个简单的jQuery扩展来禁用一段时间的选择：Disabling Selection in jQuery。您可以通过$('.button').disableSelection();

调用它

或者，使用CSS（跨浏览器）：

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

Answer 2

以下CSS代码几乎适用于现代浏览器：

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

对于IE，您必须在html标记中使用JS或insert属性。

<div id="foo" unselectable="on" class="unselectable">...</div>

Answer 3

只需添加一些对css的补充，即可更新aleemb原创的，备受推崇的答案。

我们一直在使用以下组合：

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

我们建议添加webkit-touch条目：
http://phonegap-tips.com/articles/essential-phonegap-css-webkit-touch-callout.html

2015年4月：只需使用可能派上用场的变体更新我自己的答案。如果你需要动态地选择/不可选择DIV并且愿意使用Modernizr，那么以下工作在javascript中整齐地工作：

    var userSelectProp = Modernizr.prefixed('userSelect');
    var specialDiv = document.querySelector('#specialDiv');
    specialDiv.style[userSelectProp] = 'none';

Answer 4

正如约翰内斯已经建议的那样，背景图像可能是仅在CSS中实现这一目标的最佳方式。

JavaScript解决方案还必须影响“dragstart”才能在所有流行的浏览器中生效。

JavaScript的：

<div onselectstart="return false;" ondragstart="return false;">your text</div>

jQuery的：

var _preventDefault = function(evt) { evt.preventDefault(); };
$("div").bind("dragstart", _preventDefault).bind("selectstart", _preventDefault);

富

Answer 5

你可以试试这个：

<div onselectstart="return false">your text</div>

Answer 6

textarea的简单背景图片不会足够吗？

Answer 7

您可以在CSS中使用pointer-events: none;

div {
  pointer-events: none;
}

Answer 8

WebKit浏览器（即Google Chrome和Safari）的解决方案类似于Mozilla的-moz-user-select：none

.no-select{    
    -webkit-user-select: none;
    cursor:not-allowed; /*makes it even more obvious*/
}

Answer 9

同样在IOS中如果你想摆脱出现在触控上的灰色半透明叠加层，请添加css：

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;

Answer 10

使用

onselectstart =“return false”

它可以防止复制您的内容。

Answer 11

确保将z-index的位置显式设置为绝对或相对，以便进行选择。我有一个类似的问题，这解决了我。

Answer 12

不确定您的用例，但您可以将其设置为可拖动。

有没有办法让DIV无法选择？

12 个答案: