とにかく、すばやくクリックしたときにChromeで要素が青くハイライト表示されないようにするにはどうすればよいですか。

ほとんどの場合、私は心配していませんが、画像カルーセルを使用しています。次の前のdivと前のdivをクリックすると、Chromeでハイライトされます。

私は、outline：noneを使用してみましたが、効果はありません。そこに解決策はありますか？

JavaScriptを使用してテキストの選択をクリアして選択を「クリア」するFloreminによって提供されるリンクに加えて、純粋なCSSを使用してこれを実行することもできます。CSSはこちらです...

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

class="noSelect"このクラスを適用する要素に属性を追加するだけです。このCSSソリューションを試してみることを強くお勧めします。JavaScriptの使用には何の問題もありません。これは潜在的に簡単であり、コードの内容を少し整理するだけでよいと思います。

AndroidのChrome -webkit-tap-highlight-color: transparent;は、Androidでサポートするために実験したい追加のルールです。

Android上のChromeの場合、-webkit-tap-highlight-color CSSプロパティを使用できます。

-webkit-tap-highlight-colorは、リンクがタップされているときにリンクの上に表示されるハイライトの色を設定する非標準のCSSプロパティです。強調表示は、タップが正常に認識されていることをユーザーに示し、タップしている要素を示します。

強調表示を完全に削除するには、値をtransparent次のように設定します。

-webkit-tap-highlight-color: transparent;

これがアクセシビリティに影響を与える可能性があることに注意してください。outlinenone.comを参照してください

私はChromeバージョン60を実行していますが、以前のCSSの回答はどれも機能しませんでした。

Chromeがoutlineスタイルを介して青いハイライトを追加していることがわかりました。次のCSSを追加すると修正されます。

:focus {
    outline: none !important;
}

ただし、場合によってはuser-select、touch-callout電源をオフにしてcursor: pointer;も、この効果が発生することがありcursor: default;ます。そのため、設定するだけで機能します。

それらの要素でselectイベントのハンドラーを作成してみてください。ハンドラーで選択を解除できます。

これをみて：

JavaScriptによるテキスト選択のクリア

選択を解除する例です。必要な特定の要素でのみ機能するように変更する必要があります。

これは私にとって最もうまくいきます：

.noSelect:hover {
  background-color: white;
}