css - マウスオーバー - テキスト選択ハイライトを無効にする方法は?




テキスト 選択 css (20)

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

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

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

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

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

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

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

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


IE用のJavaScriptソリューションは

onselectstart="return false;"

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/


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

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


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

.user-select(none);

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

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

ワーキング

CSS:

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

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


あなたはFirefoxとSafari(Chromeも同様)でそうすることができます。

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

あなたはそれのためのCSSJavaScriptを使用することができます、 JavaScriptの方法は古い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>


この擬似要素はCSSセレクタレベル3の草案にありましたが、その動作が特にネストされた要素で不十分であり、相互運用性が達成されていないように見えるので、候補推奨段階で削除されました。

それはHow::: selectionがネストされた要素に対して働いていると言われています

ブラウザに実装されているにもかかわらず、タブのデザイン(選択した場合)と同じ色と背景色を使用して、選択されていないという錯覚を作成することができます。

通常のCSSデザイン

p { color: white;  background: black; }

選択時

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

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


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

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

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


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

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

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


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

::selection {
    background: transparent;
}

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

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

タッチイベントで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;
}

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

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

私が必要とした結果を得るために、私はuser-selectuser-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; 
}

私はCSS-Tricksウェブサイトから学びました。

user-select: none;

そしてこれもまた:

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

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

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


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




textselection