テキスト選択の強調表示を無効にする方法

ボタンのように機能するアンカー（たとえば、質問、タグ）スタックオーバーフローページの上部にある[、[ ユーザー]など）またはタブの場合、ユーザーが誤ってテキストを選択した場合に強調表示効果を無効にするCSS標準の方法はありますか？

これはJavaScriptで実行できることを理解しています。少しグーグルするとMozillaのみが生成されました -moz-user-selectます。オプションが。

CSSでこれを達成するための標準に準拠した方法はありますか？そうでない場合、「ベストプラクティス」アプローチとは何ですか？

2017年1月の更新：

よると、缶Iの使用、user-select現在のInternet Explorer 9およびそれ以前のバージョンを除くすべてのブラウザでサポートされています（残念ながら、まだベンダー接頭辞を必要とします）。

正しいCSSバリエーションはすべて次のとおりです。

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

注user-select（現在では標準化プロセスであるW3Cのワーキングドラフト）。すべての場所での動作が保証されているわけではありません。また、ブラウザー間の実装に違いがある可能性があり、将来のブラウザーではサポートが打ち切られる可能性があります。

詳細については、Mozilla Developer Networkのドキュメントを参照してください。

ほとんどのブラウザでは、これはCSS user-selectプロパティの独自のバリエーションを使用して実現できます。最初はCSS 3で提案され、その後放棄され、現在はCSS UIレベル4で提案されています。

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

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

Internet Explorer <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を参照してください。

これはまだすべての可能性をカバーしていません。選択不可能な要素で選択を開始することは不可能ですが、一部のブラウザー（Internet ExplorerやFirefoxなど）では、ドキュメント全体を選択不可にせずに、選択不可能な要素の前後で開始する選択を防ぐことは依然として不可能です。

Internet ExplorerのJavaScriptソリューションは次のとおりです。

onselectstart="return false;"

CSS 3のuser-selectプロパティが利用可能になるまで、Geckoベースのブラウザー-moz-user-selectは既に見つけたプロパティをサポートします。WebKitおよびBlinkベースのブラウザーは、-webkit-user-selectプロパティをます。

もちろん、これはGeckoレンダリングエンジンを使用しないブラウザではサポートされていません。

「標準」に準拠した迅速で簡単な方法はありません。JavaScriptの使用はオプションです。

本当の質問は、なぜユーザーが特定の要素を強調表示できず、おそらくコピーして貼り付けられないようにしたいのですか？ユーザーが自分のWebサイトの特定の部分を強調表示しないようにしたいと思ったことが一度もありません。私の友人の何人かは、コードの読み書きに何時間も費やした後、ハイライト機能を使用して、ページのどこにいたかを思い出したり、マーカーを提供して目が次にどこを見ればよいかを知らせたりします。

ユーザーがWebサイトをコピーして貼り付けた場合に、コピーして貼り付けてはいけないフォームのボタンがある場合にのみ、これが役立つと私は思います。

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

以前の回答の解決策では、選択が停止しましたが、カーソルはまだ変化しているため、ユーザーはまだテキストを選択できると考えています。静的に保つには、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>

これにより、デスクトップアプリケーションの場合と同様に、テキストが完全にフラットになります。

FirefoxとSafari（Chromeも？）

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

WebKitの回避策：

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

CardFlipの例で見つけました。

ハイブリッドCSS + jQueryソリューションが好きです。

内部のすべての要素を<div class="draggable"></div>選択不可にするには、次のCSSを使用します。

.draggable {
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-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;
 }

そして、jQueryを使用している場合は、これを$(document).ready()ブロック内に追加します。

if (($.browser.msie && $.browser.version < 10) || $.browser.opera) $('.draggable').find(':not(input)').attr('unselectable', 'on');

入力要素を操作可能にしたいので、:not()疑似セレクターが必要だと思います。あなたは使うことができます'*'気にしない場合代わりに。

警告：Internet Explorer 9はこの追加のjQueryピースを必要としない場合があるので、そこにバージョンチェックを追加することをお勧めします。

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

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

しかし、それは最善の方法ではありません。

CSSまたはJavaScriptを使用できますそのを。

JavaScriptの方法がサポートされ、古いようなブラウザ、古いです同様のInternet Explorerのバージョンが、それはあなたのケースではない場合は、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>

さらにInternet Explorerの場合、疑似クラス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; /* Internet Explorer  */
}

これらの行を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;
}

クイックハックアップデート

noneすべてのCSS user-selectプロパティ（そのブラウザのプレフィックスを含む）の値を使用する場合、これによって依然として発生する可能性のある問題があります。

.div {
    -webkit-user-select: none; /* Chrome all / Safari all */
    -moz-user-select: none;    /* Firefox all             */
    -ms-user-select: none;     /* Internet Explorer  10+  */
     user-select: none;        /* Likely future           */
}

CSS-トリックは言う、問題は次のとおりです。

WebKitでは、周囲の要素を選択した場合でも、テキストをコピーできます。

enforce要素全体が選択されるように、以下のものを使用することもできます。つまり、要素をクリックすると、その要素にラップされたすべてのテキストが選択されます。これについては、値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  */
}

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

LessとBootstrapを使用している場合は、次のように記述できます。

.user-select(none);

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

ワーキング

CSS：

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

これは動作するはずですが、古いブラウザでは動作しません。ブラウザの互換性の問題があります。

SASS（SCSS構文）

あなたはミックスインでこれを行うことができます：

// Disable selection
@mixin disable-selection {
    -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 */
}

// No selectable element
.no-selectable {
    @include disable-selection;
}

HTMLタグ内：

<div class="no-selectable">TRY TO HIGHLIGHT</div>

このCodePenでお試しください。

自動プレフィックスを使用している場合は、他のプレフィックスを削除できます。

ブラウザの互換性はこちら。

Mozillaのみのプロパティは別として、いいえ、標準のCSSだけでテキスト選択を無効にする方法はありません（現時点では）。

気づいたら、Stack Overflowはナビゲーションボタンのテキスト選択を無効にしません。通常の選択動作を変更し、ユーザーの期待と矛盾するため、ほとんどの場合は無効にすることをお勧めします。

これは一部のブラウザーで機能します。

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

他の答えはより良いです。これはおそらく最後の手段/キャッチオールと見なされるべきです。

次divのような2つのがあるとします。

.second {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/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>

カーソルをデフォルトに設定して、ユーザーに選択できない感じを与えます。

すべてのブラウザーでプレフィックスをサポートするには、プレフィックスを使用する必要があります。接頭辞がないと、すべての回答で機能しない場合があります。

これは、色の選択も不要な場合に役立ちます。

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

...他のすべてのブラウザの修正。それはで動作するInternet Explorer 9の以降。

これを、テキストの選択を無効にする最初のdivに追加します。

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

注意：

正解は正しいので、テキストを選択できなくなります。ただし、次のスクリーンショット（2014年11月7日現在）で紹介するように、テキストをコピーすることを妨げるものではありません。

ご覧のとおり、番号を選択することはできませんでしたが、コピーすることはできました。

テスト済み：Ubuntu、Google Chrome 38.0.2125.111。

必要な結果を得るには、両方::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;
}

これは次のように簡単に実行できます。

-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>。そのinnerHTML（h1この場合はHello、World）を削除する必要があります。次に、CSSに移動してこれを行う必要があります。

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

今では、それはテキストではなくブロック要素であると単に考えています。

これはCSSではありませんが、言及する価値があります。

jQuery UI Disable Selection：

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

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/

この疑似要素はCSSセレクターレベル3のドラフトに含まれていましたが、特にネストされた要素では動作が十分に指定されておらず、相互運用性が達成されていないようだったため、候補の推奨段階で削除されました。

ネストされた要素での::選択のしくみで説明されています。

これはブラウザーに実装されていますが、タブのデザイン（あなたの場合）と同じ色と背景色を使用して、テキストが選択されていないように見せることができます。

通常のCSSデザイン

p { color: white;  background: black; }

選択時

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

ユーザーがテキストを選択できないようにすると、ユーザビリティの問題が発生します。