[解決済み] Chromeで素早くクリックしたときに、要素が青くハイライトされるのを防ぐ方法は？

質問

ほとんどの場合、気にならないのですが、画像カルーセルがあり、次と前のdivを素早くクリックすると、Chromeでハイライト表示されるのです。

outline:noneを使用してみましたが効果なし。何か解決策はないでしょうか？

解決方法を教えてください。

純粋なCSSを使ってこれを実現することができます。マルチブラウザに対応するために、クロームは1行目と最後の :focus ビットを使用します。詳細は以下の通りです。

.noSelect {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.noSelect:focus {
    outline: none !important;
}

を追加するだけです。 class="noSelect" 属性を、このクラスを適用したい要素に追加します。このCSSによる解決策をぜひ試してみてください。JavaScriptの使用も提案されているが、私はこれが最もクリーンな解決策だと思う。

Android/Safari mobile/Edge用

-webkit-tap-highlight-color: transparent; は、お探しの追加ルールです。Chromeのデスクトップ（特にタッチスクリーン）およびモバイルデバイスに影響します。 この非標準プロパティの使用に関する警告は以下の通りです。 と同様に アクセシビリティに関するいくつかの提案 . ベストプラクティスは、ハイライトをあなた自身のスタイルに置き換えることです。

UPDATE: Chromeの後のバージョンでは...

この回答のコメント欄で、ご指摘をいただきました :focus { outline: none !important;} は新しいバージョンのChromeで必要です。回答は、この点も含めて修正されました ああ、規格は常に変化しているのですね。