スマホでタップした時に一瞬出るハイライト表示をCSSで消す方法。さらにハイライト表示の色を変える方法

2017年7月19日WebデザインCSS, カスタマイズ

スマホでタップした時に一瞬出るハイライト表示があると思います。それをCSSで消す方法です。

a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    tap-highlight-color: rgba(0, 0, 0, 0);
}

rgba(0, 0, 0, 0)の4つの数字の部分で色と透明度を指定しています。

左から赤(r)緑(g)青(b)アルファ(a)です。上記の例ではアルファを0ゼロにしているので色に関わらずハイライトが見えないようになっています。アルファを0.0~1.0の間で指定し、加えて色も指定すれば、タップ時のハイライトをデフォルトの色から変更する事も可能です。

ハイライトを見えないようにして、かつマウスオーバー時のスタイルなどを適用していない場合、ユーザーからしてみればタップしても一見何も反応が無いので、自分がタップしたかどうかが分かりづらいという事があります。使う際は本当に必要かどうか良く検証してからにしてください。