DIVを選択不可にする方法はありますか？

ここにあなたのための興味深いCSS質問があります！

透かしの一種として使用したいテキストをオーバーレイする透明な背景のテキストエリアがあります。テキストは大きく、textareaの大部分を占めます。それは見栄えがよく、問題は、ユーザーがテキスト領域をクリックすると、代わりに透かしテキストが選択される場合があることです。透かしのテキストを選択できないようにしたい。z-indexの値がそれより低いと選択できなくなると思っていましたが、ブラウザーはアイテムを選択するときにz-indexレイヤーを気にしないようです。このDIVを決して選択できないようにするためのトリックまたは方法はありますか？

しばらく前に選択を無効にする単純なjQuery拡張機能を書きました：Disableing 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;
} 

次のCSSコードは、ほぼ最新のブラウザで機能します。

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

IEの場合は、JSを使用するか、htmlタグに属性を挿入する必要があります。

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

aleembの元の非常に支持された回答をcssにいくつか追加して更新するだけです。

以下のコンボを使用しています。

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

ヨハネスがすでに示唆したように、背景画像はCSSだけでこれを実現するためのおそらく最良の方法です。

JavaScriptソリューションは、「ドラッグスタート」に影響を与えて、一般的なすべてのブラウザで効果を発揮する必要があります。

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

リッチ

pointer-events: none;CSSで使用できます

div {
  pointer-events: none;
}

あなたはこれを試すことができます：

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

textareaの単純な背景画像で十分ではないでしょうか？

WebKitブラウザー（Google ChromeやSafariなど）には、Mozillaの-moz-user-select：noneに似たCSSソリューションがあります。

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

また、IOSでタッチ時に表示される灰色の半透明のオーバーレイを削除する場合は、cssを追加します。

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

使用する

onselectstart = "falseを返す"

コンテンツのコピーを防ぎます。

z-indexを選択できるようにするには、絶対位置または相対位置を明示的に設定してください。同様の問題があり、これで解決しました。

ユースケースはわかりませんが、ドラッグ可能にすることができます。