web-dev-qa-db-ja.com

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

ボタン（たとえば、Stack Overflowページの上部にある Questions 、 Tags 、 Users など）やタブのように動作するアンカーの場合、無効にするCSSの標準的な方法があります。ユーザーが誤ってテキストを選択した場合の強調表示効果

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

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

csscross-browserhighlighttextselection
4716
anon

2017年1月の更新日：

によると を使用できますか？user-selectは現在Internet Explorer 9以前のバージョンを除くすべてのブラウザでサポートされています（しかし残念なことにstillはベンダープレフィックスが必要です）。

正しい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>

これは 非標準の機能 であることに注意してください（つまり、どの仕様にも含まれていません）。すべての場所で動作することが保証されているわけではなく、ブラウザ間で実装に違いがある可能性があり、将来的にはブラウザはそれをサポートしなくなる可能性があります。

より詳しい情報は Mozilla Developer Networkのドキュメント にあります。

6710
Blowsie

ほとんどのブラウザでは、これはCSS user-selectプロパティの独自のバリエーションを使用して実現できます。 は当初提案され、その後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"));

2014年4月30日更新 ：このツリートラバーサルは新しい要素がツリーに追加されるたびに再実行する必要がありますが、@。Hanによるコメントからこれを避けることが可能であると思われます[.____イベントのターゲットにmousedownを設定するunselectableイベントハンドラを追加します。詳細は http://jsbin.com/yagekiji/1 を参照してください。

これはまだすべての可能性をカバーしていません。選択できない要素で選択を開始することは不可能ですが、ブラウザ（IEやFirefoxなど）によっては、選択できない要素の前後で選択が開始されるのを防ぐことができず、文書全体を選択できません。

776
Tim Down

IEのJavaScriptソリューションは

onselectstart="return false;"
177
Pekka 웃

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

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

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

本当の問題は、なぜユーザーが特定の要素を強調表示し、おそらくコピーして貼り付けることができないようにしたいのですか。私がユーザーに私のウェブサイトの特定の部分を強調させないようにしたかったのは一度もしたことがありません。私の友人の何人かは、コードを読み書きするのに何時間も費やした後、ハイライト機能を使ってページのどこにいたのかを覚えたり、次に目を向けるべき場所がわかるようにマーカーを付けたりします。

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

171
X-Istence

<p>要素を除くすべてでテキスト選択を無効にしたい場合は、CSSでこれを行うことができます（noneを持つ他のブラウザで許可されているサブ要素での上書きを許可する-moz-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;
}
125
Benjamin Crouzier

上記の解決策では選択は停止されますが、ユーザーはまだカーソルが変化するのでテキストを選択できると思います。静的にするには、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>

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

114
ZECTBynmo

あなたはFirefoxとSafariでそれを行うことができます（Chromeもそうですか？）

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

WebKit の回避策

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

CardFlipの例で見つけました。

75
Alex

私はハイブリッド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の断片を必要としないかもしれないので、そこにバージョンチェックを追加したいと思うかもしれません。

67
Tom Auger

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

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

65
Ale

そのために _ css _ または JavaScript を使用できます。 JavaScript wayは、Old IEなどの古いブラウザでもサポートされていますが、そうでない場合は、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>

62
Alireza

さらに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;/*IE*/
}
57
Elad Shechter

仕事

CSS：

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

これはうまくいくはずですが、古いブラウザではうまくいきません。ブラウザの互換性の問題があります。

46
suraj rawat
-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');
46
Gaurang

Androidのブラウザでtouchイベントを使って同じことができない場合は、

html,body{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
}
46
Beep.exe

Less および /Bootstrap を使用している場合は、

.user-select(none);
45
Codler

この行を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;
}
35
user1012506

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

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

33
hbw

これは some browsersで動作します。

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

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

32
r3wt

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

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

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

接頭辞なしですべてのブラウザでそれをサポートするために接頭辞を使用する必要があるこれはすべての答えではうまくいかないかもしれません。

32
Gaurav Aggarwal

色の選択も必要ない場合に便利です。

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

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

29
karthipan raj

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

onmousedown='return false;' 
onselectstart='return false;'
28
Chase1986

注：

正しい答えは、テキストを選択できなくなるという点で正しいです。しかし、それはあなたがテキストをコピーすることを可能にすることを妨げるものではありません。

Before we have selected anything

After we have selected

The numbers have been copied

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

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

28
Luke Madhanga

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

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

jQuery UIで選択を無効にする ：

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

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

21
zgnilec

この擬似要素はCSS Selectors Level 3のドラフトにありましたが、特にネストされた要素ではその動作が仕様を下回っているように見え、相互運用性が達成されなかったため、勧告候補段階で削除されました。

How :: selectionが入れ子になった要素に対して機能するで説明されています。

ブラウザに実装されているにもかかわらず、選択時にタブデザインと同じ色と背景色を使用することで、テキストが選択されていないように見せることができます。

通常のCSSデザイン

p { color: white;  background: black; }

選択時

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

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

21
Suraj Naik

クイックハックの更新：2017年3月-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 */ 
}

As 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 */   
}
15
Kaz

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

user-select: none;

そしてこれも：

::selection{ background-color: transparent;}
::moz-selection{ background-color: transparent;}
::webkit-selection{ background-color: transparent;}
15
Mohammed Javed

簡単に

-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>を持っているとしましょう、あなたがしなければならないことはそのh1のinnerHTMLを削除することです：この場合 こんにちは、World 。それからあなたはCSSに行ってこれをしなければならないでしょう：

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

今それは単にそれがブロック要素であり、テキストではないと考えるだけです。

11
codeWithMe

これを使ってみてください。

::selection {
    background: transparent;
}

また、特定の要素の内側で選択しないことを指定したい場合は、次のように選択規則の前に要素クラスまたはIDを置くだけです。

.ClassNAME::selection {
    background: transparent;
}
#IdNAME::selection {
    background: transparent;
}
10
mustafa-elhelbawy

この強調表示効果は、ホバー（onMouseHover）と呼ばれるアクションによるものです。任意のタブにカーソルを合わせると、色が変わります.

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

<!-- CSS CODE -->

.effect:hover{
   color: none;
}

強調表示したい場合は、任意の色を付けることができます。それ以外の場合は、何も付けないでください。

10
Pushp Singh

そのためには以下のようにUser-selectプロパティを使用できます。

p {  
     -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 */             
   }

詳細な説明へのリンク

9
Chirag Dave
 -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
9
Hetal Rupareliya

ページ全体の選択と強調表示を無効にしたい場合は、cssを使って簡単に行うことができます。

* {
    -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 */
  }
8
jasonleonhard

CSSでは - 

div {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -o-user-select: none;

  "unselectable='on' onselectstart="return false;"
  onmousedown="return false;
}
<div>
  Blabla
  <br/> More Blabla
  <br/> More Blabla...
</div>

6
Abrar Jahin

さらに良いことには、テキスト選択を無効にすることができます。

もしあなたがSASS（SCSS）が好きで、コンパスを使いたくないのなら、これを実行できます。

styles.scss

@mixin user-select($select) {
  -webkit-touch-callout:#{$select};
  @each $pre in -webkit-, -moz-, -ms-, -o-, -khtml- {
  #{$pre + user-select}: #{$select};
  } 
  #{user-select}: #{$select};
}

.no-select {
  @include user-select(none);
}
4
Yevgeniy Afanasyev

私はIE <9に必要な選択不可のタグとさまざまなブラウザのCSSを組み合わせました。

<style>
[unselectable="on"] {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}
</style>
<div unselectable="on">Unselectable Text</div>
4
omikes

たぶんあなたはを通してこの解決策を使用することができます：

nav li {
	display: inline-block;
	position: relative;
}

nav li a {
	display: inline-block;
	padding: 10px 20px;
}

nav li a:hover {
	color: red;
}

nav li.disabled:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
<nav>
	<ul>
	<li><a href="#">Link</a></li>
	<li class="disabled"><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
	</ul>
</nav>

JsFiddle - https://jsfiddle.net/grinmax_/9L1cckxu/

1
grinmax

:: selection {背景：透明;色：透明;}

:: - moz-selection {背景：透明;色：透明;}

0
Navneet Kumar

また、選択が禁止されているボタンなどの要素に触れたときにコンテキストメニューが表示されないようにすることもできます。そのためには、このコードをページ全体に追加するか、ボタン要素のみに追加します。

$("body").on("contextmenu",function(e){
    return false;
});
0
GeekyMonkey