5771

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

-moz-user-selectこれはJavaScriptで実行でき、少しグーグルするとMozillaのみのオプションが得られたことに気づきました。

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

4

50 に答える 50

8170

2017 年 1 月の更新:

Can I useによると、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 のドキュメントを参照してください。

この属性noneの値textは、、、、、、およびtoggleです。elementelementsallinherit

于 2010-12-10T09:28:22.777 に答える
920

user-selectほとんどのブラウザーでは、これは CSSプロパティの独自のバリエーションを使用して実現できます。これは、当初提案され、その後 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 など) では、ドキュメント全体を選択できないようにすることなく、選択できない要素の前後で開始して終了する選択を防ぐことは依然として不可能です。

于 2010-12-05T11:45:11.047 に答える
223

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

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

それを行うための「標準」準拠の迅速かつ簡単な方法はありません。JavaScript の使用はオプションです。

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

これが有用であることがわかった唯一の場所は、ユーザーが Web サイトをコピーして貼り付けた場合にコピーして貼り付けてはならないフォームのボタンがある場合です。

于 2009-05-05T20:37:10.103 に答える
206

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

onselectstart="return false;"
于 2009-11-13T16:05:58.853 に答える
152

要素以外のすべてのテキスト選択を無効にしたい場合は<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;
}
于 2011-05-24T21:24:53.037 に答える
135

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

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

于 2015-08-30T18:32:57.460 に答える
118

Firefox と Safari で実行できます (Chrome も?)

::selection { background: transparent; }
::-moz-selection { background: transparent; }
于 2009-05-05T20:46:27.227 に答える
87

WebKitの回避策:

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

CardFlip の例で見つけました。

于 2011-09-21T07:09:59.487 に答える
86

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 部分は必要ない場合があるため、そこにバージョン チェックを追加することをお勧めします。

于 2011-11-11T19:53:19.923 に答える
79 

.hidden:after {
    content: attr(data-txt);
}
<p class="hidden" data-txt="Some text you don't want to be selected"></p>

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

于 2013-05-01T11:36:36.903 に答える
66

さらに 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  */
}
于 2013-12-23T14:05:05.910 に答える
62

これらの行を 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;
}
于 2016-08-28T07:13:16.270 に答える
52

touch イベントを使用して 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;
}
于 2014-05-19T05:30:01.507 に答える
49

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

.user-select(none);
于 2012-04-18T08:34:40.057 に答える
49 
-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');
于 2012-10-26T05:44:15.133 に答える
49

働く

CSS:

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

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

于 2014-02-27T09:01:50.813 に答える
40

Mozilla 専用のプロパティを除けば、いいえ、標準の CSS だけでテキスト選択を無効にする方法はありません (現時点では)。

お気付きのように、スタック オーバーフローはナビゲーション ボタンのテキスト選択を無効にしません。通常の選択動作が変更され、ユーザーの期待と矛盾するため、ほとんどの場合無効にしないことをお勧めします。

于 2009-05-05T20:38:05.127 に答える
37

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>

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

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

于 2016-03-28T09:42:03.890 に答える
37

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

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

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

于 2014-04-09T22:56:24.437 に答える
33

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

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

...他のすべてのブラウザの修正。Internet Explorer 9以降で動作します。

于 2013-04-03T08:31:10.310 に答える
32

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

onmousedown='return false;' 
onselectstart='return false;'
于 2012-10-30T06:56:19.030 に答える
30

ノート：

正解は、テキストを選択できなくなるという点で正しいです。ただし、次の 2 枚のスクリーンショット (2014 年 11 月 7 日現在) で示すように、テキストをコピーできなくなるわけではありません。

何かを選択する前に

選択した後

数字がコピーされた

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

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

于 2014-11-07T13:22:21.950 に答える
21

この疑似要素は 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; }

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

于 2014-03-21T13:53:43.460 に答える
19

CSS-Tricks Web サイトから学びました。

user-select: none;

そしてこれも：

::selection {
    background-color: transparent;
}

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

::webkit-selection {
    background-color: transparent;
}
于 2016-04-01T11:16:39.077 に答える
16

は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>

于 2021-05-03T18:20:15.513 に答える
11

これを使用してみてください：

::selection {
    background: transparent;
}

また、特定の要素内で not select を指定したい場合は、次のように、要素のクラスまたは ID を選択ルールの前に置きます。

.ClassNAME::selection {
    background: transparent;
}
#IdNAME::selection {
    background: transparent;
}
于 2016-01-20T09:22:16.107 に答える
9

このハイライト効果は、ホバー(onMouseHover) と呼ばれるアクションによるものです。

タブにカーソルを合わせると、その色が変わります。

たとえば、

HTML コード

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

CSSコード

.effect:hover {
    color: none;
}

強調したい場合は、任意の色を使用できます。それ以外の場合は使用できますnone。

于 2016-06-03T13:12:16.593 に答える
8

要素を選択または強調表示できないことを定義するクラスを 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>
于 2020-03-06T10:33:17.977 に答える
-6 
<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>
于 2019-12-06T12:54:28.367 に答える