スマートフォンでリンクやボタンをタップした際に、リンクエリアがハイライト（iOS Safari だとグレー / Android for Chrome だとオレンジ）で表示されることがあります。

このハイライト表示が不要なとき、CSSで無効化する方法を紹介します。

ハイライトカラーを無効化

使うプロパティは「-webkit-tap-highlight-color」です。

CSSで次のように記述します。

a {
	-webkit-tap-highlight-color: transparent;
}

ハイライトカラーを変更

もし、ハイライトカラーを無効化するのではなく、違う色に変更したい場合は通常のカラー指定でOKです。

a {
	-webkit-tap-highlight-color: #ff0000; /* 例 */
}

なお、Androidの場合はハイライトカラーを変更することができないので、JavaScriptを使って「指で画面を触れたときと指を離したときとで、色を変更するなどの別処理を入れる必要があります。