web-dev-qa-db-ja.com

ダブルクリックしたときにdiv要素の強調表示を停止する方法

背景画像付きのこのdiv要素があり、それをダブルクリックしたときにdiv要素の強調表示を停止したい。これにCSSプロパティはありますか？

cssxhtmltagshighlightingdouble-click
76
dave

以下のCSSは、ユーザーがテキストを選択できないようにします。ライブの例： http://jsfiddle.net/hGTwu/20/

-webkit-user-select: none; /* Chrome/Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */

/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;

IE9を下方にターゲットにしてOpera= html属性unselectableを代わりに使用する必要があります。

<div unselectable="on">Test Text</div>
135
tw16

これは私のために働く

html
{
  -webkit-tap-highlight-color:transparent;
}
39
Hans

Chromeでdivの強調表示を停止する解決策を見つけようとしていたので、この投稿に目を向けました。しかし、残念ながら、答えはどれも私の問題を解決しませんでした。

多くのオンライン調査の結果、修正は非常に簡単なものであることがわかりました。複雑なCSSは必要ありません。次のCSSをWebページに追加するだけで設定は完了です。これは、モバイル画面だけでなくラップトップでも機能します。

div { outline-style:none;}

[〜＃〜] note [〜＃〜]：これはChromeバージョン44.0.2403.155 mで機能しました。このURLで説明されているように、今日のすべての主要なブラウザでサポートされています： http://www.w3schools.com/cssref/pr_outline-style.asp

27
Sunil

私はCSSの専門家ではありませんが、影響を受ける要素の数を増やす限り、tw16の答えを使用できると思います。たとえば、これにより、他の種類の対話性に影響を与えることなく、ページ上のすべての場所が強調表示されなくなります。

*, *:before, *:after {
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}

その最初の行はPaul Irishの好意によるものです（ http://adamschwartz.co/magic-of-css/chapters/1-the-box/ を介して）。

7
SterlingVix

すべてのdiv要素をターゲットにします。

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

すべての要素をターゲットに設定：

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

ユーザーの選択を無効にします：

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

選択した要素の背景を透明に設定します。

div::-moz-selection { background:transparent; }
div::selection { background:transparent; }
1
Jin.