色css テキスト選択ハイライトを無効にする方法は?




15 Answers

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

*.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できない要素の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日更新 :ツリーに新しい要素が追加されるたびにこのツリートラバーサルを再実行する必要がありますが、@ Halのコメントからは、 unselectable mousedown設定するmousedownイベントハンドラを追加することで回避できます。イベントのターゲット。 詳細については、 http://jsbin.com/yagekiji/1を参照してください。

これはまだすべての可能性を網羅していません。 選択できない要素で選択を開始することは不可能ですが、一部のブラウザ(IEやFirefoxなど)では、選択できない要素の前後で開始する選択を非選択にすることはできません。

css フォーカス させない

ボタンのように動作するアンカー(例えば、[]ページの上部にある[ Questions] 、[ Tags] 、[ Users]など)の場合、ユーザが誤ってテキストを選択した場合にハイライト効果を無効にするCSS標準の方法はありますか?

私はこれがJavaScriptでできていることに気付きました。ちょっとしたグーグルがMozillaの-moz-user-selectオプションを得ました。

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




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

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

すばやく簡単な「標準」準拠の方法はありません。 JavaScriptを使用することはオプションです。

実際の質問は、ユーザーが特定の要素を強調表示し、おそらくコピー&ペーストできないようにしたいのはなぜですか? 私は、ユーザーが私のウェブサイトの特定の部分を強調表示しないようにしたいということを一度も見逃していません。 多くの時間を費やしてコードを読み書きした後で、友人の何人かはハイライト機能を使って、ページ上のどこを覚えているか、目の前にどこに見えるかを知るためのマーカーを提供します。

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




上記のソリューションでは選択は中止されていますが、カーソルはまだ変わっているので、ユーザーはまだテキストを選択できると考えています。 静的にするには、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>

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




WebKit回避策:

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

私はCardFlipの例でそれを見つけました。




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

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




Internet Explorerの場合、 擬似クラスフォーカス (.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*/
}



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



LessBootstrapを使用している場合、次のように書くことができます:

.user-select(none);



これは一部のブラウザで動作します:

::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年11月7日現在)に示すように、テキストをコピーできないことはありません。

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

テスト済み: UbuntuGoogle Chrome 38.0.2125.111




これは、色の選択も必要ない場合に便利です:

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

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







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/ : http://jsfiddle.net/y4Lac/2/




クイックハックのアップデート:2017年3月 - 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 */ 
}

CSS-Tricksは問題が

  • 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 */   
}



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

::selection {
    background: transparent;
}

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

.ClassNAME::selection {
    background: transparent;
}
#IdNAME::selection {
    background: transparent;
}



Related