スマホでボタンやリンクをタップした時のハイライトを無効にする

Web開発のお話です。スマホでボタンやリンクをタップした時、デフォルトだとその要素が押された感をユーザーにフィードバックするためのハイライト表示が行われます。こんなやつ↓

ハイライトしているボタン

見たら「あー、あれね」となるんじゃないでしょうか。

ブラウザの方で親切でやってくれているものではあるのですが、そもそもボタンの方にタップされたら凹ませるなどのデザインをしている場合は、それだけでフィードバックが事足りているのでかえってハイライトが邪魔だったりします。

そんな時はcssのtap-highlight-colorプロパティでハイライトを消してしまいましょう。スタイルの指定はこうです。

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

ちなみに、わたしの環境だとAutoprefixerではプレフィックスつけてくれなかったので-webkit-から記述するのが吉かと。あと、上の記述はハイライトを無効にする場合の設定ですが、ご想像の通り色を指定することもできます。

CodePenにもデモ作ったので動作確認したい方はこちらでどうぞ。PCだと違いわからないのでスマホで見てしてくださいね。

動作確認環境