[Css] テキスト選択ハイライトを無効にする方法は?


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

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

Question

ボタンのように動作するアンカー(例えば、[]ページの上部にある[ 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サイトをコピーして貼り付けた場合にコピーして貼り付けるべきではないフォーム用のボタンがある場合です。




あなたはそれのためのCSSJavaScriptを使用することができます、 JavaScriptの方法は古いIEのような古いブラウザでもサポートされていますが、あなたのケースではない場合は、CSSの方法を使用してください:

HTML / JavaScript:

<body onselectstart='return false;'>
  <h1>This is the Heading!</h1>
  <p>And I'm the text, I won't be selected if you select me.</p>
</body>

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>




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

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




この強調表示の効果は、ホバー(onMouseHover)と呼ばれるアクションによるものです。 タブにカーソルを合わせると、色が変わります。 ちょうど例えば言う。

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

<!-- CSS CODE -->

.effect:hover{
   color: 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カーソルを設定する必要があります:

.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の例でそれを見つけました。




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

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




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

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

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

通常のCSSデザイン

p { color: white;  background: black; }

選択時

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

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




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

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



ワーキング

CSS:

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

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




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



 -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;



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

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

カーソルをデフォルトに設定すると、選択できない感触がユーザ/

プレフィックスはプレフィックスなしですべてのブラウザでサポートするために使用する必要があります。これはすべての回答で機能しない可能性があります。